JS ProgressEvent仅在完成时触发

Question

我在上传进度条正常工作时遇到了一些问题.

根据XMLHttpRequest Level 2规范,我为loadstart附加了事件监听器,并且进展如下:

var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener('loadstart', function(e) {progressCallback(0);});
xhr.upload.addEventListener('progress', function (e) {
    progressCallback(e.loaded / e.total);
});    

$.ajax({
    url: url,
    type: 'POST',
    processData: false,
    contentType: false,
    data: formData,
    xhr: function () {
        return xhr;
    }
}).done(function (data) {
    // Finish stuff
})

文件已正确上传,但只有在请求以100%完成后才会调用进度监听器(e.total == e.loaded)

上面的代码有什么问题,或者是否有必要以任何特殊方式配置服务器？

Answer 1

当文件的总大小无法确定e.loaded且e.total为零时。您可以在您的函数中检查这一点progress：

if (evt.lengthComputable) {
    progressCallback(e.loaded / e.total);
}

服务器还必须发送规范Content-Length中定义的内容：

如果通过Content-Length头知道HTTP实体主体的长度，则将lengthComputable属性初始化为true，并将total属性初始化为该长度。

另请注意，进度条不适用于该file:协议。

我真的可以推荐非常广泛的 Mozilla 文档 -使用 XMLHTTPRequest Mozilla 文档