jQuery監聽檔案上傳實現進度條效果

原理：

給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);//獲得上傳結束後伺服器返回的資料
    }
});

作者： Hacker丶wand 
連結：http://www.imooc.com/article/5879
來源：慕課網