可以onprogress功能可以通过使用xhrFields加到jQuery.ajax（）？ [英] Can onprogress functionality be added to jQuery.ajax() by using xhrFields?

问题描述

由于这里建议：<一href="https://gist.github.com/HenrikJoreteg/2502497">https://gist.github.com/HenrikJoreteg/2502497,我想onprogress功能添加到我的 jQuery.ajax（）文件上传。上传工作正常，并且onprogress事件被解雇，但并非如我所料 - 而不是在一定的时间间隔重复发射，它的发射只有一次，当上载完成。有没有一种方法来指定onprogress刷新的频率是多少？或者，我会努力做一些事情，不能做？这是我的code：

  $。阿贾克斯（
{
    异步：真正的，
    的contentType：file.type，
    数据：文件，
    数据类型：XML，
    过程数据：假的，
    成功：函数（XML）
    {
        //做的东西与返回的XML
    }，
    类型：'后'，
    网址：'/ fileuploader /+ file.name，
    xhrFields：
    {
        onprogress：功能（进度）
        {
            变种百分比= Math.floor（（progress.total / progress.totalSize）* 100）;
            的console.log（进步，百分比）;
            如果（百分比=== 100）
            {
                的console.log（DONE！）;
            }
        }
    }
}）;
 

解决方案

简短的回答：
不，你不能这样做，你想用什么 xhrFields 。

的回答：

有一个XmlHtt prequest对象两份进度事件：

• 响应研究的进展（XmlHtt prequest.onprogress <$ C C $>）
  这是当在浏览器从服务器下载的数据。

• 请求进度（XmlHtt prequest.upload.onprogress <$ C C $>）
  这是当在浏览器中的数据发送到服务器（包括POST参数，饼干，和文件）

在你的code使用的是响应progress事件，但你需要的是要求进步的事件。这是你如何做到这一点：

  $。阿贾克斯（{
    异步：真正的，
    的contentType：file.type，
    数据：文件，
    数据类型：XML，
    过程数据：假的，
    成功：函数（XML）{
        //做的东西与返回的XML
    }，
    类型：'后'，
    网址：'/ fileuploader /+ file.name，
    XHR：函数（）{
        //获取本机XmlHtt prequest对象
        VAR XHR = $ .ajaxSettings.xhr（）;
        //设置onprogress事件处理程序
        xhr.upload.onprogress =功能（EVT）{执行console.log（'进步'，evt.loaded / evt.total * 100）};
        //设置onload事件处理
        xhr.upload.onload =功能（）{执行console.log（DONE！）};
        //返回自定义对象
        返回XHR;
    }
}）;
 

在 XHR 选项参数必须是一个函数，返回本地XmlHtt prequest对象jQuery来使用。

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

解决方案

Short answer:
No, you can't do what you want using xhrFields.

Long answer:

There are two progress events in a XmlHttpRequest object:

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

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

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

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

这篇关于可以onprogress功能可以通过使用xhrFields加到jQuery.ajax（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！