使用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對象的。