使用xhrFields可以将进度功能添加到jQuery.ajax（）中吗？

Question

正如在这里建议的：https://gist.github.com/HenrikJoreteg/2502497，我正在尝试将onprogress功能添加到我的jQuery.ajax()文件上传中。上传工作正常，进行中的事件正在发射，但并非如我所料 - 而是在某个时间间隔内重复发射，而上传完成后它只发射一次。有没有办法指定进行中刷新的频率？或者，我是否想做一些无法完成的事情？这是我的代码：

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

Answer 1

在发送请求之前，您需要为请求本身添加一个事件处理程序。 jQuery.ajax允许这种通过“beforeSend”属性http://api.jquery.com/jQuery.ajax/

例如： http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

*编辑* 请务必看看这个例子链接的第二个代码示例。我相信第一个与现代版本的jQuery过时了。

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     console.log(percentComplete); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
}); 

Answer 2

简短的回答：
不，你不能这样做，你想用什么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选项参数必须是返回jQuery来使用原生XMLHttpRequest对象的。