Progress icon while POST request is processing

There are next initial conditions:

Backend: servlet for file uploading;

UI: form, that submits servlet for file upload:

<iframe id="uploadFrame" name="uploadFrame"></iframe>
<form enctype="multipart/form-data" method="post" target="uploadFrame" 
      action="<%= request.getContextPath() %>/uploadFile?
      portletId=${portletId}&remoteFolder=${remoteFolder}">
...
</form>

When submit button for this form is clicked, that file uploading is in progress and POST request correspondingly is processing (may track 开发者_运维技巧in FireBug).

Is it possible to draw progress icon dependently on this POST request is processing?

I mean,that if POST is processing, that web page should show progress .gif icon.

Perhaps,it's possible with Ajax.PeriodicalUpdater function of Prototype lib or some other solution?

Anyway, looks like, it's impossible to do without ajax.

Thanks fo any help.

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>

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.

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