原理：

給XMLHttpRequest對象的upload屬性綁定onprogress方法監聽上傳過程

var xhr = new XMLHttpRequest();? xhr.upload.onprogress = function(e) {}

因為jQuery默認使用的XMLHttpRequest對象是內部生成的無法直接給jq的xhr綁定onprogress方法

所以只要給jQuery重新生成一個綁定了onprogress的XMLHttpRequest對象即可實現

首先封裝一個方法 傳入一個監聽函數 返回一個綁定了監聽函數的XMLHttpRequest對象

var xhrOnProgress=function(fun) {xhrOnProgress.onprogress = fun; //綁定監聽//使用閉包實現監聽綁return function() {//通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象var xhr = $.ajaxSettings.xhr();//判斷監聽函數是否為函數if (typeof xhrOnProgress.onprogress !== 'function')return xhr;//如果有監聽函數并且xhr對象支持綁定時就把監聽函數綁定上去if (xhrOnProgress.onprogress && xhr.upload) {xhr.upload.onprogress = xhrOnProgress.onprogress;}return xhr;} }

?

上傳時使用$.ajax方法

var formData = new FormData(document.forms[0]);
$.ajax({url : url,type : 'POST',
? data : formData,
? //不處理表單數據
? processData : false,
? //不處理contentType
? contentType : false,
? beforeSend:function(){
?? ?? console.log("start transfer");
? },
? success : function(responseStr) {
?? ?? console.log(responseStr);
? },
? error : function(responseStr) {
?? ? console.log("error");
? },
?//用自定義的xhr代替jquery的xhrxhr:xhrOnProgress(function(e){var percent=e.loaded / e.total;//計算百分比}) });

?

轉載于:https://www.cnblogs.com/yiyide266/p/6932250.html

總結

以上是生活随笔為你收集整理的[jquery]为jQuery.ajax添加onprogress事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。