問題描述

這里建議:https://gist.github.com/HenrikJoreteg/2502497，我正在嘗試將 onprogress 功能添加到我的 jQuery.ajax() 文件上傳中.上傳工作正常，并且 onprogress 事件正在觸發(fā)，但不像我預(yù)期的那樣 - 不是在某個時間間隔重復(fù)觸發(fā)，而是在上傳完成時只觸發(fā)一次.有沒有辦法指定onprogress刷新的頻率?或者，我是否正在嘗試做一些無法做到的事情?這是我的代碼:

As suggested here: https://gist.github.com/HenrikJoreteg/2502497, I'm trying to add onprogress functionality to my jQuery.ajax() file upload. The upload works fine, and the onprogress event is firing, but not as I expected--instead of firing repeatedly at some time interval, it's firing only once, when the upload has completed. Is there a way to specify the frequency of onprogress refreshes? Or, am I trying to do something that can't be done? Here's my code:

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

嗯，已經(jīng)好幾年了.我重新審視了這一點，并使用 GetFree 的答案，將我的代碼更新為以下內(nèi)容:

Well, it's been a few years. I revisited this, and using GetFree's answer, I updated my code to the following:

$('#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 的帖子標(biāo)記為已接受的答案.抱歉耽擱了.

I have marked GetFree's post as the accepted answer. Sorry for the delay.

推薦答案

簡答:
不，你不能使用 xhrFields 做你想做的事.

長答案:

XmlHttpRequest 對象中有兩個進度事件:

There are two progress events in a XmlHttpRequest object:

• 響應(yīng)進度(XmlHttpRequest.onprogress)
  這是瀏覽器從服務(wù)器下載數(shù)據(jù)的時候.

• The response progress (XmlHttpRequest.onprogress)
  This is when the browser is downloading the data from the server.

請求進度 (XmlHttpRequest.upload.onprogress)
這是瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)(包括 POST 參數(shù)、cookie 和文件)的時候

The request progress (XmlHttpRequest.upload.onprogress)
This is when the browser is sending the data to the server (including POST parameters, cookies, and files)

在您的代碼中，您使用的是響應(yīng)進度事件，但您需要的是請求進度事件.這就是你的做法:

In your code you are using the response progress event, but what you need is the request progress event. This is how you do it:

$.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 選項參數(shù)必須是返回原生 XmlHttpRequest 對象以供 jQuery 使用的函數(shù).

The xhr option parameter must be a function that returns a native XmlHttpRequest object for jQuery to use.

這篇關(guān)于可以使用 xhrFields 將 onprogress 功能添加到 jQuery.ajax() 嗎?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！