Progress bar for uploading iframe files?

Question

I am currently working on a web application that allows the user to upload files without reloading the page. While the user can view the files, and when the input is changed, the files are downloaded using the following iframe method:

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 fine, but the user does not know what the files are loading, and how long it will take. Is there a way to make a progress bar that displays the progress of file downloads?

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

Answer 1

, multipart/form-data, ; , JavaScript, . . Flash ( , , ) HTML 5. XMLHTTPRequests.