Question

I’m currently working on a web application that allows the user to upload files without reloading the page. So far, the user can browse for files, and when the input is changed, the files are uploaded using the following iframe technique:

HTML:

<iframe name="iframe-target" src="./Image" style="display:none;"></iframe>
<form method="POST" enctype="multipart/form-data" id="old-style-upload" target="iframe-target" action="./Image"> 
   <input type="file" name="files[]" multiple id="old-file-picker" >
</form>

Javascript/jQuery:

$('#old-file-picker').change(function ()  {
  // Submit the form
  $('#old-style-upload').submit();
});
$('iframe[name=iframe-target]').load(function () {
  // Code that deals with the newly uploaded files
  $('#old-style-upload').get(0).reset();
});

This works great, however, the user has no way of knowing that the files are uploading, nor how long it will take. Is there any way to make a progress bar that displays the progress of the file uploads?

The only thing I can think of is to show a loading gif.

Answer 1

To do this, if you use regular multipart/form-data form post, you’ll need to have code on the server-side; one that can feed-back progress to the JavaScript running in the clients’ browsers. Take a look at this previously asked question. Alternatively you might use Flash (but you probably don’t want to) or HTML 5. You can take a look at that question and this question concerning XMLHTTPRequests.