javascript - 使用 JavaScript 上传文件 - 如何获得更频繁的 onprogress 事件

Question

我正在使用 jQuery 上传照片，并为 onprogress 事件附加了一个监听器。然而，即使上传几兆字节的照片，唯一被触发的 onprogress 事件是在它达到 100% 时。我已经看到其他网站，如 dropbox 和 facebook 显示了更加流畅的进度条。如何更频繁地更新上传进度？

示例上传代码:

var file = $photoFile.get(0).files[0];
var fileBlob = file && file.slice();
var formData = new FormData();
var title = $photoTitle.val();

formData.append('file', fileBlob);
formData.append('title', title);

$.ajax({
    url: '/api/v1/photo/submit',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhrFields: {
        onprogress: function(ev) {
            console.info('upload progress', ev);
            if (ev.lengthComputable) {
                var percentUploaded = Math.floor(ev.loaded * 100 / ev.total);
                console.info('Uploaded '+percentUploaded+'%');
                // update UI to reflect percentUploaded
            } else {
                console.info('Uploaded '+ev.loaded+' bytes');
                // update UI to reflect bytes uploaded
            }
        }
    }
}).done(function(response) {
    // do stuff
}).fail(function() {
    // handle error
});

Answer 1

我能够从 this 借用代码计算器问题。

我犯的主要错误是依赖 $.ajax 调用的 xhrFields 属性中的 onprogress。相反，为了更频繁地更新进度，我使用 xhr 属性传递了自定义 XMLHttpRequest:

$.ajax({
    url: '/api/v1/photo/submit',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload) {
            myXhr.upload.addEventListener('progress',function(ev) {
                if (ev.lengthComputable) {
                    var percentUploaded = Math.floor(ev.loaded * 100 / ev.total);
                    console.info('Uploaded '+percentUploaded+'%');
                    // update UI to reflect percentUploaded
                } else {
                    console.info('Uploaded '+ev.loaded+' bytes');
                    // update UI to reflect bytes uploaded
                }
           }, false);
        }
        return myXhr;
    }
}).done(function(response) {
    // do stuff
}).fail(function() {
    // handle error
});

警告:这利用了较新的网络技术，不适用于较旧的浏览器，尤其是 IE。