jQuery File Upload的使用

jQuery File Upload 是一個Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示等，以下就介紹一下該插件的簡單使用

1、需要加載的js文件有

　　jquery.js，

　　jquery-ui-widget.js，

　　jquery.iframe-transport.js，

　　jquery.fileupload.js

2、upload.js的配置

a、html代碼

<input type="file" id='file'>
<input type="button" value="提交" id='submit'>

b、與頁面綁定的javascript代碼

$('#submit').click(function () {
    if (currentFile) {
        //動態的傳輸參數
        currentFile.formData = {id:123};
        //進行文件提交
        currentFile.submit();
    } else {
        utils.error('請傳入.xlsx文件');
    }
});

c、javascript代碼

$('#file').fileupload({
    //type: 文件上傳HTTP請求方式，可以選擇“POST”，“PUT”或者"PATCH",
    type: 'POST',
    //url：請求發送的目標url,默認為post方式
    url: '/admin/qa/upload-file',
    //dataType:希望從服務器返回的數據類型，默認"json"
    dataType: 'json',
    //formData:需要傳輸的參數，這里是靜態的傳輸，如果需要動態的傳輸需要在add這個進程里面進行傳輸
    formData: {id: 123},
    //autoUpload:是否自動上傳，即當文件放入file之后便自動上傳，默認為true
    autoUpload: false,
    //acceptFileTypes：允許上傳的的文件類型
    acceptFileTypes: /(\.|\/)xlsx$/i,
    //maxFileSize: 最大上傳文件大小
    maxFileSize: 1,
    //minFileSize:最小上傳文件大小,單位B
    minFileSize: 1,
    //previewMaxWidth : 圖片預覽區域最大寬度
    //添加文件后觸發
    add: function (ev, data) {
        currentFile = null;
        $('#result-panel').html('');
        var name = data.files[0].name;
        if (/(\.|\/)xlsx$/i.test(name)) {
            $('#xlsFileShow').html(name);
            //data里面包含些方法，如果submit提交這個API，可以根據用戶的需求進行提交
            //如果需要動態的傳參可以用data.formData=123，進行傳輸
            currentFile = data;
            //執行如果不符合的條件
        } else {
            //執行如果傳入的文件名稱不符合正則匹配的代碼
        }
    },
    //當一個單獨的文件處理隊列結束（完成或失敗時）觸發
    progressalways: function (e, data) {
    },
    //全局上傳處理事件的回調函數,即上傳過程時觸發
    progressall: function (e, data) {
        //進度條可以用data.loaded與data.total的比進行完成
    },
    //上傳請求失敗時觸發的回調函數，如果服務器返回一個帶有error屬性的json響應這個函數將不會被觸發
    fail: function (e, data) {
    },
    // 上傳請求成功時觸發的回調函數，如果服務器返回一個帶有error屬性的json響應這個函數也會被觸發
    done: function (e, data) {
    },
    //上傳請求結束時（成功，錯誤或者中止）都會被觸發。
    always: function (e, data) {
    }
})

 具體的官方文檔地址 ：

http://hayageek.com/docs/jquery-upload-file.php#doc