jquery - 可以使用 xhrFields 将 onprogress 功能添加到 jQuery.ajax() 中吗？

Question

按照此处的建议:https://gist.github.com/HenrikJoreteg/2502497 ，我正在尝试将 onprogress 功能添加到我的 jQuery.ajax() 文件上传中。上传工作正常，并且 onprogress 事件正在触发，但并不像我预期的那样 - 它不是在某个时间间隔重复触发，而是仅在上传完成时触发一次。有没有办法指定正在进行刷新的频率？或者，我正在尝试做一些无法完成的事情吗？这是我的代码:

    $.ajax(
    {
        async: true,
        contentType: file.type,
        data: file,
        dataType: 'xml',
        processData: false,
        success: function(xml)
        {
            // Do stuff with the returned xml
        },
        type: 'post',
        url: '/fileuploader/' + file.name,
        xhrFields:
        {
            onprogress: function(progress)
            {
                var percentage = Math.floor((progress.total / progress.totalSize) * 100);
                console.log('progress', percentage);
                if (percentage === 100)
                {
                    console.log('DONE!');
                }
            }
        }
    });

<小时/>

嗯，已经过去几年了。我重新审视了这一点，并使用 GetFree的答案，我将代码更新为以下内容:

$('#file_input').change(function()
{
    var file = this.files[0];
    $('#upload_button').click(funtion(e)
    {
        req = new XMLHttpRequest();
        req.upload.addEventListener('progress', updateProgress, false);
        req.addEventListener('load', transferComplete, false);
        var url  = 'https://my.url'; 
        req.open('POST', url, true);
        req.setRequestHeader('Content-Type', myFileType);
        req.setRequestHeader('Content-Length', myFileLength);
        req.send(file);
    });
);
function updateProgress(e)
{
    var percent = Math.floor(e.loaded / e.total * 100);
    console.log("percent = " + percent);
}
function transferComplete(e)
{
    console.log("transfer complete");
}

我已将 GetFree 的帖子标记为已接受的答案。抱歉耽搁了。

Answer 1

简短回答:
不，您无法使用 xhrFields 执行您想要的操作。

长答案:

XmlHttpRequest 对象中有两个进度事件:

• 响应进度 (XmlHttpRequest.onprogress)
  这是浏览器从服务器下载数据的时候。

• 请求进度 (XmlHttpRequest.upload.onprogress)
  这是浏览器向服务器发送数据(包括 POST 参数、cookie 和文件)的时间

在您的代码中，您正在使用响应进度事件，但您需要的是请求进度事件。您可以这样做:

$.ajax({
    async: true,
    contentType: file.type,
    data: file,
    dataType: 'xml',
    processData: false,
    success: function(xml){
        // Do stuff with the returned xml
    },
    type: 'post',
    url: '/fileuploader/' + file.name,
    xhr: function(){
        // get the native XmlHttpRequest object
        var xhr = $.ajaxSettings.xhr() ;
        // set the onprogress event handler
        xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ;
        // set the onload event handler
        xhr.upload.onload = function(){ console.log('DONE!') } ;
        // return the customized object
        return xhr ;
    }
});

xhr 选项参数必须是返回 native XmlHttpRequest 对象以供 jQuery 使用的函数。