为什么我的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; 
      }; 
     } 
    } 

这绝对可以作为这个项目是非常良好的维护，并有工作演示。我认为这应该是一个很好的起点。希望能帮助到你。