1

我正在使用 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
});
4

1 回答 1

4

我能够从这个stackoverflow问题中借用代码。

我犯的关键错误是依赖于调用的onprogress内部xhrFields属性$.ajax。相反，为了获得更频繁的进度更新，我使用以下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
});

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

于 2013-10-21T20:37:54.233 回答