How to display and remove a loading .gif when downloading a file?

I have a button that, when clicked on, needs to download a file by submitting a form using POST. [Edit to clarify: The file being downloaded is dynamically generated via a PHP script based on values within the hidden form (which I change via jQuery, depending on the button clicked). The file in question is an Excel file. I would prefer not to use GET if possible, since I don't want people to link directly to the file.]

I am unable to use $.post to submit the form because this does not work as I would like. While the submission happens fine, it doesn't trigger the download dialogue box in the browser. As I understand it, the contents of the file now exist within JavaScript, and there's no way (that I know of) that allows you to send this to the browser from JavaScript for download. So, other solutions (e.g. How do I use jQuery or Ajax to swap the background image after a form is submitted?) won't work in this particular case.

The solution I found was to use the $("#someform").submit(); to fire a hidden form when the button was clicked on. The page doesn't reload, and the save dialogue pops up on screen.

Example code:

$( "#button" ).click(
    function() {
        $(this).removeClass( "button" );
        $(this).addClass( "loading" );
  开发者_如何学C      $( "#form" ).submit();  
    }
);

However, since it could take several seconds to generate the file, I wanted to display a loading animation gif to the user. This now presents the problem that I can display the animation, but I cannot remove the animation after the form has been submitted.

If it can't be done using this method, is there a better solution someone can suggest?

---

You should either serve a URL to the .gif or stream it encoded as Base64

---

When you submit the form the whole page is going to refresh, the loading image will definitely be removed unless you are not adding it somewhere else on page load.

---

I've posted an answer in this question that demonstrates how to do this. See the demo at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php and source files at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

---

I've done this with 2 librairies Under MIT licence : BinaryTransport and FileSaver. In this exemple, i'm downloading an Excel file generated server side.

HTML (in head tag):

<script src="/E1/js/jquery.binarytransport.js" charset="UTF-8"></script>
<script src="/E1/js/FileSaver.js" charset="UTF-8"></script>

Javascript :

function ExportToExcel(urlExcel, fileName){
      $("body").css("cursor", "progress");
      $.ajax({
          url: urlExcel,
          type: "GET",
          dataType: 'binary',
          headers:{'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','X-Requested-With':'XMLHttpRequest'},
          processData: false,
          success: function(blob){
                $("body").css("cursor", "default");
                saveAs(blob, fileName);
          },
            error : function(result, status, error){
                $("body").css("cursor", "default");
          } 
        });  
}

For a custom loading animation, just call it where I change cursor type at these lines :

$("body").css("cursor", "progress");
$("body").css("cursor", "default");