jQuery監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法
原理:
給XMLHttpRequest對象的upload屬性綁定onprogress方法監(jiān)聽上傳過程
var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){}
因?yàn)閖Query默認(rèn)使用的XMLHttpRequest對象是內(nèi)部生成的無法直接給jq的xhr綁定onprogress方法
所以只要給jQuery重新生成一個綁定了onprogress的XMLHttpRequest對象即可實(shí)現(xiàn)
首先封裝一個方法 傳入一個監(jiān)聽函數(shù) 返回一個綁定了監(jiān)聽函數(shù)的XMLHttpRequest對象
var xhrOnProgress=function(fun) { xhrOnProgress.onprogress = fun; //綁定監(jiān)聽 //使用閉包實(shí)現(xiàn)監(jiān)聽綁 return function() { //通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象 var xhr = $.ajaxSettings.xhr(); //判斷監(jiān)聽函數(shù)是否為函數(shù) if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有監(jiān)聽函數(shù)并且xhr對象支持綁定時就把監(jiān)聽函數(shù)綁定上去 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文件上傳工具 自帶進(jìn)度條效果 支持綁定自定義監(jiān)聽函數(shù),支持上傳實(shí)時預(yù)覽(HTML5實(shí)現(xiàn) 無需服務(wù)器)HW.js
<div id="cover" class="HW_upload">請選擇要上傳的文件</div> <script> var upload= new HW.Widget.upload.Create({ target:'#cover',//指定上傳控件 url:"/upload.php",//上傳地址 //設(shè)置允許上傳的文件大小 單位為kb 默認(rèn)為 4096 maxSize:2048, //開啟多文件上傳 mult:false, //設(shè)置上傳按鈕的文字 uploadText:'請選擇要上傳的文件', //設(shè)置上傳超時限制 單位為分鐘 默認(rèn)為20分鐘 timeout:20, //設(shè)置允許上傳的文件類型 默認(rèn)為['png','jpg','jpeg'] // accept:['jpg'], //設(shè)置文件上傳參數(shù)名 默認(rèn)為HW_upload_input inputName:'cover', //設(shè)置控件為圖片上傳 默認(rèn)為true 為false時則不開啟文件預(yù)覽 isImage:true, //自定義文件檢查函數(shù) 默認(rèn)檢測文件大小 類型 // fileCheck:function(file){return true;}, viewSize:[500,300],//設(shè)置圖片預(yù)覽框?qū)捀?默認(rèn)為400,300 viewImageWidth:70,//設(shè)置預(yù)覽圖片寬度默認(rèn)為80 done:function(data){ alert(data);//獲得上傳結(jié)束后服務(wù)器返回的數(shù)據(jù) } });
以上就是小編為大家?guī)淼膉Query監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法全部內(nèi)容了,希望大家多多支持腳本之家~
- jquery 簡單的進(jìn)度條實(shí)現(xiàn)代碼
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動畫和進(jìn)度條插件
- jquery實(shí)現(xiàn)的一個簡單進(jìn)度條效果實(shí)例
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
- Javascript jquery css 寫的簡單進(jìn)度條控件
- jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
- jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
- 利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計時插件
- jquery實(shí)現(xiàn)百分比記分進(jìn)度條
相關(guān)文章
jQuery EasyUI中的日期控件DateBox修改方法
下面小編就為大家?guī)硪黄猨Query EasyUI中的日期控件DateBox修改方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jquery實(shí)現(xiàn)多條件篩選特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)多條件篩選特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動
點(diǎn)擊左右按鈕圖片橫向滾動jquery,一次滾動四個,圖片滾動完成,自動回到第一個版面,效果相當(dāng)不錯,感興趣的前端工程師們可以參考下2013-04-04基于Jquery實(shí)現(xiàn)的一個圖片滾動切換
很多效果還是要封裝成插件才好,這里只是給大家個效果參考。對像我這種新手應(yīng)該還是有幫助的吧2012-06-06jQuery中綁定事件bind() on() live() one()的異同
本文主要介紹了jQuery中綁定事件bind() on() live() one()的異同,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02jquery過濾特殊字符'',防sql注入的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query過濾特殊字符',防sql注入的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08jquery Easyui Datagrid實(shí)現(xiàn)批量操作(編輯,刪除,添加)
本篇文章主要介紹了jquery Easyui Datagrid實(shí)現(xiàn)批量操作(編輯,刪除,添加),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02