如何获取标准 html 表单上传的进度条？答案

【问题标题】：How to get a progress bar for a standard html form upload?如何获取标准 html 表单上传的进度条？
【发布时间】：2013-04-08 17:29:32
【问题描述】：

我正在使用 YouTube 的 API 将视频从浏览器直接上传到他们的服务器。他们的api documentation 使用标准的 html 表单来上传视频。这个过程有效，但我想为上传添加一个进度条。这是否可以通过旧的学校表单上传或者有没有办法异步执行相同的操作？我正在使用 asp.net mvc\api。谢谢！

<form action="URL?nexturl=http%3A%2F%2Fwww.example.com" method="post"
  enctype="multipart/form-data" onsubmit="return checkForFile();">
  <input id="file" type="file" name="file"/>
  <div id="errMsg" style="display:none;color:red">
    You need to specify a file.
  </div>
  <input type="hidden" name="token" value="TOKEN"/>
  <input type="submit" value="go" />
</form>

【问题讨论】：

标签： asp.net-mvc upload youtube-api

【解决方案1】：

不，标准上传无法显示进度条。提交表单后，从技术上讲，您已经退出了该页面。浏览器会一直保留它，直到它从服务器接收到要加载的新内容，这在上传完成并且表单完全发布之前不会发生。与此同时，您的页面基本上已经死了。

过去，人们使用 Flash 或 Java 控件来实现这一点，但所做的只是允许异步文件传输，因为仅使用普通的旧 HTML 和 JavaScript 是无法做到的。

使用 HTML5，现在可以上传 AJAX 文件。有关快速介绍，请参阅 http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/。请注意，这仅在现代浏览器中受支持（即没有 IE6-9）。有使用 iframe 来模拟异步上传的备用方案。只是做一些谷歌搜索。

【讨论】：