原理:
給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方法
$.ajax({ url: url, type: 'POST', xhr:xhrOnProgress(function(e){ var percent=e.loaded / e.total;//計算百分比 }) });
使用HW.js文件上傳工具 自帶進度條效果 支持綁定自定義監聽函數,支持上傳實時預覽(HTML5實現 無需服務器)HW.js
<div id="cover" class="HW_upload">請選擇要上傳的文件</div> <script> var upload= new HW.Widget.upload.Create({ target:'#cover',//指定上傳控件 url:"/upload.php",//上傳地址 //設置允許上傳的文件大小 單位為kb 默認為 4096 maxSize:2048, //開啟多文件上傳 mult:false, //設置上傳按鈕的文字 uploadText:'請選擇要上傳的文件', //設置上傳超時限制 單位為分鐘 默認為20分鐘 timeout:20, //設置允許上傳的文件類型 默認為['png','jpg','jpeg'] // accept:['jpg'], //設置文件上傳參數名 默認為HW_upload_input inputName:'cover', //設置控件為圖片上傳 默認為true 為false時則不開啟文件預覽 isImage:true, //自定義文件檢查函數 默認檢測文件大小 類型 // fileCheck:function(file){return true;}, viewSize:[500,300],//設置圖片預覽框寬高 默認為400,300 viewImageWidth:70,//設置預覽圖片寬度默認為80 done:function(data){ alert(data);//獲得上傳結束後服務器返回的數據 } });
以上就是小編為大家帶來的jQuery監聽文件上傳實現進度條效果的方法全部內容了,希望大家多多支持~