使用 Javascript 上传进度（使用或不使用 XMLHttpRequest 2）答案

【问题标题】：Upload progress (with or w/o XMLHttpRequest 2) with Javascript使用 Javascript 上传进度（使用或不使用 XMLHttpRequest 2）
【发布时间】：2011-05-23 15:09:54
【问题描述】：

XMLHttpRequest 2 有一个新东西。它可以上传文件。我得到了那个工作（这非常容易）。现在我想知道是否有办法获取该文件的上传进度。我通常不会对此感兴趣，但在 Google Chrome (8) 中，我看到 onreadystatechange 事件是 XMLHttpRequestProgressEvent。进度...那里没有关于上传进度的任何内容（只是请求状态），但这让我想知道。

Google Chrome 在本地上传大文件时有一个进度“计数器”。这是标准的。它始终存在且不可配置。它在状态栏中。 Javascript可以实现类似的功能吗？我想把它放在一个不错的 <progress> 元素或其他东西中。

我不想要 SWF 或 Java 上传器（带有轮询和 >JS 回调）。它必须是原生的。如果浏览器可以做到，那么现在的Javascript应该可以做到，对吧！？ =)

如果没有XMLHttpRequest 2，我想用非常标准的文件上传是不可能的（没有ajax，只有<input type=file>）。

感谢您的信息

【问题讨论】：

标签： javascript ajax file upload progress

【解决方案1】：

挂钩进度事件。这将为您提供所有请求的进度。首先检查上传对象是否可用——这只会为您提供上传部分的进度。

类似这样的：

var xhr; // this is your XMLHttpRequest

// hook to upload events if available, otherwise snag all progress events
var eventSource = xhr.upload || xhr;

eventSource.addEventListener("progress", function(e) {
    // normalize position attributes across XMLHttpRequest versions and browsers
    var position = e.position || e.loaded;
    var total = e.totalSize || e.total;

    // TODO: display progress
});

【讨论】：

xhr.upload 和 xhr 都有进度事件？有什么不同？ XHR的唯一功能就是上传，不是吗？
xhr.onprogress 仅在启动/结束服务器响应时触发。 xhr.upload.onprogress 每隔一段时间就会触发一次，直到上传完成。这是预期的功能性行为吗？
不是很清楚，具体取决于您使用的浏览器和 XMLHttpRequest 版本。基本上，xhr.onprogress 会触发上传和下载。 xhr.upload.onprogress 仅在上传时触发。 xhr.upload 仅在 XMLHttpRequest 版本 2 中实现。通过挂钩 xhr.upload.onprogress（如果可用）或 xhr.onprogress，无论您使用哪个版本，都可以获得上传进度。如果您挂钩 xhr.onprogress（即 XMLHttpRequest v1），您还将获得响应的进度。