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.对象progress上还有事件,xhr但这是针对从服务器返回的响应.

有关更多详细信息,请参阅MDN文章.

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

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