爲什麼我的HTML5進度條不會隨着jQuery AJAX而改變？

Question

我想爲我的jQuery/AJAX上傳腳本製作一個進度條。腳本中的所有內容都能正常工作，除了進度條的值永遠不會改變。另外，在控制檯中，percentComplete變量總是隻有1，它會記錄兩次。我嘗試過所有可以找到的東西，但似乎沒有任何效果。進度條本身被添加到我的div中，但就是這樣。

$.ajax({ 
    beforeSend : function(){ 
     $(settings.message_div).html('<progress id="#upload-progress" value="0" max="100"></progress>'); 
    }, 
    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); 
       $('#upload-progress').val(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); 
       $('#upload-progress').val(percentComplete); 
      } 
     }, false); 
    return xhr; 
    }, 
    type: "POST", 
    dataType: "xml", 
    data: formData, 
    url: settings.ajax_url, 
    processData: false, 
    contentType: false, 
    cache: false, 
    success: function(xml){ 
     //console.log('ajax called'); 
    }, 
    error: function(xhr){ 
     $(settings.message_div).html(xhr.responseText); 
     //console.log(xhr.responseText); 
    } 
}); 

這是從here

Answer 1

onprogress應採取的近期工作。你看到的教程有點過時了。 http://www.html5rocks.com/en/tutorials/file/xhr2/
http://www.w3.org/TR/progress-events/#introduction

xhr.upload.onprogress = function(e) { 
if (e.lengthComputable) { 
    var progressBar = $('#upload-progress').get(0); 
    progressBar.value = (e.loaded/e.total) * 100; 
    progressBar.textContent = progressBar.value; // Fallback for unsupported browsers. 
} 

Answer 2

的tutorial你跟着是真的老可能是相關的周圍jQuery的1.5。但由於該版本，老XHR對象已經被隱藏，並通過JQXhr對象換成更高的抽象層次：由$阿賈克斯（返回

jQuery的的XMLHttpRequest（jqXHR）對象）在jQuery的1.5是瀏覽器的原生XMLHttpRequest對象的超集。例如，它包含responseText和responseXML屬性以及一個getResponseHeader（）方法。當傳輸機制不是XMLHttpRequest（例如，JSONP請求的腳本標記）時，jqXHR對象儘可能模擬本機XHR功能。

此對象的屬性沒有很好的記錄，我不知道這是否仍然支持upload和progress功能，例如嘗試在你的代碼才能利用。

即使在博客的評論，人們使用的xhrFields選項onprogress屬性建議，但再次this SO Post證實，因爲它已被棄用，這是不可能的jQuery中的較新版本。在那個崗位只，答案提示：

的XHR選項參數必須是返回原生XmlHttpRequest對象jQuery的使用功能。從the answer

代碼片段：

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

類似的路線另一個relevant Answer，他採用的是deferred object'sprogress屬性定義裏面的上傳進度的事件處理程序。

TLDR-，如果你可以使用本機XHR對象，並利用它的上傳和進度事件就像你在jQuery的最新版本何況這是不成立的。

您應該查看一些HTML5和jquery文件上傳插件的代碼。我只是通過one會在github上，我剛剛從fileupload.js複製粘貼一些代碼項目：

 _onProgress: function (e, data) { 
     if (e.lengthComputable) { 
      var now = ((Date.now) ? Date.now() : (new Date()).getTime()), 
       loaded; 
      if (data._time && data.progressInterval && 
        (now - data._time < data.progressInterval) && 
        e.loaded !== e.total) { 
       return; 
      } 
      data._time = now; 
      loaded = Math.floor(
       e.loaded/e.total * (data.chunkSize || data._progress.total) 
      ) + (data.uploadedBytes || 0); 
      // Add the difference from the previously loaded state 
      // to the global loaded counter: 
      this._progress.loaded += (loaded - data._progress.loaded); 
      this._progress.bitrate = this._bitrateTimer.getBitrate(
       now, 
       this._progress.loaded, 
       data.bitrateInterval 
      ); 
      data._progress.loaded = data.loaded = loaded; 
      data._progress.bitrate = data.bitrate = data._bitrateTimer.getBitrate(
       now, 
       loaded, 
       data.bitrateInterval 
      ); 
      // Trigger a custom progress event with a total data property set 
      // to the file size(s) of the current upload and a loaded data 
      // property calculated accordingly: 
      this._trigger(
       'progress', 
       $.Event('progress', {delegatedEvent: e}), 
       data 
      ); 
      // Trigger a global progress event for all current file uploads, 
      // including ajax calls queued for sequential file uploads: 
      this._trigger(
       'progressall', 
       $.Event('progressall', {delegatedEvent: e}), 
       this._progress 
      ); 
     } 
    }, 

    _initProgressListener: function (options) { 
     var that = this, 
      xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr(); 
     // Accesss to the native XHR object is required to add event listeners 
     // for the upload progress event: 
     if (xhr.upload) { 
      $(xhr.upload).bind('progress', function (e) { 
       var oe = e.originalEvent; 
       // Make sure the progress event properties get copied over: 
       e.lengthComputable = oe.lengthComputable; 
       e.loaded = oe.loaded; 
       e.total = oe.total; 
       that._onProgress(e, options); 
      }); 
      options.xhr = function() { 
       return xhr; 
      }; 
     } 
    } 

這絕對可以作爲這個項目是非常良好的維護，並有工作演示。我認爲這應該是一個很好的起點。希望能幫助到你。