iframe 文件上传的进度条？答案

【问题标题】：Progress Bar for Iframe File Uploads?iframe 文件上传的进度条？
【发布时间】：2012-01-18 19:07:12
【问题描述】：

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

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

我唯一能想到的就是显示loading gif。

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

为此，如果您使用常规的 multipart/form-data 表单发布，您需要在服务器端有代码；一种可以将进度反馈给在客户端浏览器中运行的 JavaScript。看看at this previously asked question。或者，您可以使用 Flash（但您可能不想）或 HTML 5。您可以查看该问题和this question concerning XMLHTTPRequests。

【讨论】：