Iframe文件上传进度条？

Question

我是一名有用的助手，可以翻译文本。

我目前正在开发一个Web应用程序，允许用户在不重新加载页面的情况下上传文件。到目前为止，用户可以浏览文件，并且当输入更改时，使用以下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();
});

这很有效，但是用户无法知道文件正在上传，也不知道需要多长时间。有没有办法制作一个进度条来显示文件上传的进度？

我唯一能想到的就是展示一个加载动画。

- Ivan

Answer 1

要实现这个，如果你使用常规的multipart/form-data表单提交，你需要在服务器端编写代码；一个能够向运行在客户端浏览器中的JavaScript反馈进度的代码。可以看一下此前提出的问题。或者你可以使用Flash（但你可能不想这样做）或者HTML 5。你可以查看那个问题和关于XMLHTTPRequests的这个问题。

- pQd