使用Javascript上传进度(使用或不使用XMLHttpRequest 2)

Question

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

谷歌Chrome在本地上传大文件时有一个进度"计数器".这是标准的.它始终存在且不可配置.它在状态栏中.用Javascript可以做到这一点吗？我想把它放在一个很好的<progress>元素或其他东西.

我不想要SWF或Java上传器(使用轮询和> JS回调).它必须是原生的.如果浏览器可以做到这一点,这些天Javascript应该能够做到,对吧!？=)

如果不是XMLHttpRequest 2,我想用非常标准的文件上传是不可能的(没有ajax和a <input type=file>).

谢谢(你的)信息

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