快捷導(dǎo)航

jQuery監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法

更新時(shí)間：2016年10月16日 10:41:21 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

原理：

給XMLHttpRequest對(duì)象的upload屬性綁定onprogress方法監(jiān)聽上傳過(guò)程

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

因?yàn)閖Query默認(rèn)使用的XMLHttpRequest對(duì)象是內(nèi)部生成的無(wú)法直接給jq的xhr綁定onprogress方法

所以只要給jQuery重新生成一個(gè)綁定了onprogress的XMLHttpRequest對(duì)象即可實(shí)現(xiàn)

首先封裝一個(gè)方法傳入一個(gè)監(jiān)聽函數(shù) 返回一個(gè)綁定了監(jiān)聽函數(shù)的XMLHttpRequest對(duì)象

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

上傳時(shí)使用$.ajax方法

$.ajax({
  url: url,
  type: 'POST',
  xhr:xhrOnProgress(function(e){
    var percent=e.loaded / e.total;//計(jì)算百分比
  })
});

使用HW.js文件上傳工具自帶進(jìn)度條效果支持綁定自定義監(jiān)聽函數(shù)，支持上傳實(shí)時(shí)預(yù)覽（HTML5實(shí)現(xiàn) 無(wú)需服務(wù)器）HW.js

<div id="cover" class="HW_upload">請(qǐng)選擇要上傳的文件</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:'請(qǐng)選擇要上傳的文件',
  //設(shè)置上傳超時(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時(shí)則不開啟文件預(yù)覽
  isImage:true,
  //自定義文件檢查函數(shù) 默認(rèn)檢測(cè)文件大小 類型
  // 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ī)?lái)的jQuery監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: