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

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

---

我可以借用stackoverflow问题中的代码来做这件事

我犯的主要错误是依赖于调用

$.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
});

---

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

我可以借用stackoverflow问题中的代码来完成此操作

我犯的主要错误是依赖于调用

$.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
});

---

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

谢谢，这是我正在寻找的进度代码！谢谢，这是我一直在寻找的进度代码！