JS ProgressEvent 仅在完成时触发

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

根据 XMLHttpRequest Level 2 规范，我附加了用于加载启动和进度的事件侦听器，如下所示：

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）

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

当无法确定文件的总大小时，e.loaded and e.total为零。你可以在你的里面检查这个progress功能：

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

服务器还必须发送Content-Length这是定义在规格 http://www.w3.org/TR/progress-events/#interface-progressevent:

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

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

我真的可以推荐 Mozilla 文档，它们非常广泛 -使用 XMLHTTPRequest Mozilla 文档 https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest