Progress icon while POST request is processing

Answer 1

Here's a nice link to you: http://pixeline.be/experiments/jqUploader/

Answer 2

Something like Prototype or JQuery might have a cleaner solution, but in plain old javascript it should be possible to control the visibility of a progress icon based on the form submission (or add a new progress icon to the DOM. Here's a quick example. You'd probably want to clean this up a bit in the real world to avoid ugly stuff like inline styles:

Parent.htm

<script language="javascript">
   function ShowProgress() {
       document.getElementById("progress").style.display = "inline";
   }

   function HideProgress() {
       document.getElementById("progress").style.display = "none";
   }
</script>

<img src="progress.gif" id="progress" style="display: none"/>
<iframe id="uploadFrame" name="uploadFrame"></iframe>
<form enctype="multipart/form-data" onSubmit="showProgress" method="post" target="uploadFrame" >
   ...
</form>

SubmitResponse.htm (the page your upload form submits to)

<script language="javascript">
  if (parent.HideProgress) {
     parent.HideProgress();
  }
</script>

Answer 3

In a previous project I used jQuery to attach a late bound load handler to the iframe after it had been loaded and before the ajax post.

// iframe configured

// call dopost func

function dopost() {
    //this dosnt work, its for illustration that you need to wrap the iframe
    var iframe = $('iframe');
    //setup a callback to remove the gif when postback is done 
    iframe.load(function(){
      //cleanup progress indicator
    });

    //inject your animated progress gif

    //start the submit and wait for callback
    form.submit();
}

Once the postback is completed your callback function takes care of tearing down the gif.