Индикатор выполнения загрузки файлов Iframe?

Question

В настоящее время я работаю над веб-приложением, которое позволяет пользователю загружать файлы без перезагрузки страницы.Пока что пользователь может просматривать файлы, и при изменении ввода файлы загружаются с использованием следующего метода iframe:

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();
});

Это прекрасно работает, однако у пользователя нет возможности узнать, какие файлы загружаются, и сколько времени это займет.Есть ли способ сделать индикатор выполнения, который отображает ход загрузки файла?

Единственное, о чем я могу думать, это показать gif загрузки .

Answer 1

Для этого, если вы используете обычную публикацию формы multipart / form-data, вам потребуется код на стороне сервера; тот, который может сообщать о прогрессе JavaScript, запущенному в клиентских браузерах. Взгляните на ранее заданный вопрос . В качестве альтернативы вы можете использовать Flash (но, вероятно, не хотите) или HTML 5. Вы можете взглянуть на этот вопрос и этот вопрос, касающийся XMLHTTPRequests .