Ajax loader on file upload action

I would like to configure some kind of ajax loader to an action that executes a file upload. Once the file is quite large (Excel with more than 2000 rows), it takes sometime to be processed and its quite unpleasant t开发者_开发问答o the user, wait with no other feedback than the displayed by the browser.

For me, the ideal solution, would be a blocking popup, displaying a message "Processing the file..." (or something like that), to prevent users to upload another file in the meantime.

---

Well... I've got something like this in place on a Symfony app although this doesn't really relate to Symfony:

TEMPLATE:

<input type="submit" class="jq-upload" value="Upload" /> // submit button
<div class="jq-loader"></div> // empty div for a loader image

JS:

$(document).ready(function()
{
  $(".jq-upload").click(function() {
     $(".jq-loader").addClass("jq-load-icon");
  });
});

CSS:

.jq-load-icon {width: 16px; height: 16px; background: url('../images/loader.gif') no-repeat;}

So, basically the click on upload button adds a class to the empty div next to it, which has an animated gif as a background image. In this case, it's a typical loading icon.

That should give you enough to create a popup or adjust it to your needs.