Show loading image while uploading files

Question

I'm submitting multipart/form-data form as shown below. Here form is targeted to a iframe.

  <form id="upp" method="post" action="sample.jsp" name="upform" enctype="multipart/form-data" target="my_iframe">
     <input type="hidden" name="todo" value="upload">
     <input id="haa" type="file" name="uploadfile"  size="50">
  </form>

 <iframe id="my" name="my_iframe" scrolling="no" src="sample.jsp"  frameBorder="0">

  </iframe>

And script I used is

     $('#haa').change(function() {

         $('#upp').submit();

       }); 

Now how can I put loading image(.gif) while file is uploading to the iframe.

Answer 1

Here is a solution with a demo: http://www.itgeared.com/articles/1508-display-gif-loading-iframe-jquery/

What you need to enable is basically some javascript like

<script>
$(document).ready(function () {
    $('#iframe1').on('load', function () {
        $('#loader1').hide();
    });
});

and some css which you hide after the content is loaded:

#loader1 {
    position:absolute;
    background:#ffffff;
}

you can replace the background color by any url(image...)