在上载完成之前不会触发 XHR 进度事件

Question

我正在使用以下$.ajax命令从PhoneGap应用程序上传文件：

function updateProgress( evt ) {
    if ( evt.lengthComputable ) {
        var percentComplete = evt.loaded / evt.total * 100;
        console.log( percentComplete + "%" );
    }
}
$.ajax({
    url: url,
    type: "POST",
    data: data,
    cache: false,
    dataType: "json",
    processData: false, 
    contentType: false, 
    success: successCallback,
    error: errorCallback,
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener( "progress", updateProgress, false);
        return xhr;
    }
});

上传工作正常。 但是，上传完成后，进度事件仅触发一次。 它实际上不会在上传过程中触发 - 因此上传进度实际上不会显示。 上传时只有暂停，然后显示 100%。

知道我做错了什么吗？

Answer 1

上传progress事件在 xhr.upload 上触发，因此请将侦听器附加到该侦听器而不是xhr 。xhr对象上也有progress事件，但这适用于从服务器返回的响应。

有关更多详细信息，请参阅 MDN 文章。

xhr.upload.addEventListener('progress', updateProgress, false)

_{^{(感谢A. Wolff和他对OP的评论。}}