javascript - 为什么 XMLHttpRequest ProgressEvent.lengthComputable 可能为假？

Question

我正在尝试通过对进度事件使用 XMLHttpRequest 级别 2 支持，以 HTML5 的方式实现上传进度条。

在你看到的每一个例子中，方法都是像这样给进度事件添加一个事件监听器:

req.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
        var percentComplete = Math.round(event.loaded * 100 / event.total);
        console.log(percentComplete);
    }
}, false);

此类示例似乎总是假设 event.lengthComputable 为真。毕竟，浏览器肯定知道它发送的请求的长度，对吗？

无论我做什么，event.lengthComputable 都是假的。我已经在 OSX 上的 Safari 5.1.7 和 Firefox 12 中对此进行了测试。

我的网站是使用 Django 构建的，我在开发和生产设置中遇到了同样的问题。

我用来生成表单上传的完整代码如下所示(使用 jQuery):

form.submit(function() {
    // Compile the data.
    var data = form.serializeArray();
    data.splice(0, 0, {
        name: "file",
        value: form.find("#id_file").get(0).files[0]
    });
    // Create the form data.
    var fd = new FormData();
    $.each(data, function(_, item) {
        fd.append(item.name, item.value);
    });
    // Submit the data.
    var req = new XMLHttpRequest();
    req.addEventListener("progress", function(event) {
        if (event.lengthComputable) {
            var percentComplete = Math.round(event.loaded * 100 / event.total);
            console.log(percentComplete);
        }
    }, false);
    req.addEventListener("load", function(event) {
        if (req.status == 200) {
            var data = $.parseJSON(event.target.responseText);
            if (data.success) {
                console.log("It worked!")
            } else {
                console.log("It failed!")
            }
        } else {
            console.log("It went really wrong!")
        }
    }, false);
    req.addEventListener("error", function() {
        console.log("It went really really wrong!")
    }, false);
    req.open("POST", "/my-bar/media/add/");
    req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    req.send(fd);
    // Don't really submit!
    return false;
});

为此，我已经焦头烂额好几个小时了。任何帮助表示赞赏!

Answer 1

嘿，我找到了 the answer来自@ComFreek:

我犯了同样的错误。

我写的那行是:

xhr.onprogress = uploadProgress;

正确的应该是

xhr.upload.onprogress = uploadProgress;