摘要：目前可能是七牛瀏覽器文件上傳的最好實現(xiàn)。任務(wù)攔截器攔截任務(wù)返回，任務(wù)將會從任務(wù)隊列中剔除，不會被上傳中斷任務(wù)，返回，任務(wù)隊列將會在這里中斷，不會執(zhí)行上傳操作。請上傳小于的文件你可以添加多個任務(wù)攔截器選擇上傳文件確定后該生命周期函數(shù)會被回調(diào)。

qiniu4js目前可能是七牛JavaScript瀏覽器文件上傳的最好實現(xiàn)。

使用TypeScript編寫，不依賴任何三方庫，純代碼不包含任何界面元素，使用HTML5 文件API上傳(目前和未來不會支持HTML4以及FLASH)。

支持UMD模塊導入。

[x] 文件直傳

[x] 分塊上傳

[x] 多文件上傳

[x] token共享

[x] 自動重傳

[x] 任務(wù)攔截器

[x] 文件過濾

[x] 多實例(可以創(chuàng)建多個上傳實例,互不影響)

[ ] 自定義變量

[ ] 圖片裁剪

[ ] 圖片質(zhì)量壓縮

[ ] 使用七牛API進行圖片處理

sudo npm install qiniu4js --save

    import {UploaderBuilder} from "Qiniu"

    {UploaderBuilder} =  require("Qiniu")

//構(gòu)建uploader實例
let uploader = new Qiniu.UploaderBuilder()
    .debug(false)//開啟debug，默認false
    .domain("http://img.yourdomain.com")//默認為http://upload.qiniu.com
    .retry(0)//設(shè)置重傳次數(shù)，默認0，不重傳
    .size(1024*1024)//分片大小，最多為4MB,單位為字節(jié),默認1MB
    .chunk(true)//是否分塊上傳，默認true，當chunk=true并且文件大于4MB才會進行分塊上傳
    .auto(true)//選中文件后立即上傳，默認true
    .multiple(true)//是否支持多文件選中，默認true
    .accept([".gif",".png","video/*"])//過濾文件，默認無，詳細配置見http://www.w3schools.com/tags/att_input_accept.asp
    .tokenShare(true)//在一次上傳隊列中，是否分享token,如果為false每上傳一個文件都需要請求一次Token，默認true
    .tokenFunc(function (setToken,task) {
        //token獲取函數(shù)，token獲取完成后，必須調(diào)用`setToken(token);`不然上傳任務(wù)不會執(zhí)行。
        setTimeout(function () {
            setToken("token");
        }, 1000);
    })
    //任務(wù)攔截器
    .interceptor({
        //攔截任務(wù),返回true，任務(wù)將會從任務(wù)隊列中剔除，不會被上傳
        onIntercept: function (task) {
            return task.file.size > 1024 * 1024;
        },
        //中斷任務(wù)，返回true，任務(wù)隊列將會在這里中斷，不會執(zhí)行上傳操作。
        onInterrupt: function (task) {
            if (this.onIntercept(task)) {
                alert("請上傳小于1m的文件");
                return true;
            }
            else {
                return false;
            }
        },
    }   
    //你可以添加多個任務(wù)攔截器
    .interceptor({...})
    .listener({
        onReady(tasks) {
            //選擇上傳文件確定后,該生命周期函數(shù)會被回調(diào)。
            
        },onStart(tasks){
            //開始上傳
            
        },onTaskGetKey(task){
            //為每一個上傳的文件指定key,如果不指定則由七牛服務(wù)器自行處理
            return "test.png";
            
        },onTaskProgress: function (task) {
            //每一個任務(wù)的上傳進度,通過`task.progress`獲取
            console.log(task.progress);
            
        },onTaskSuccess(task){
            //一個任務(wù)上傳成功后回調(diào)
            
        },onTaskFail(task) {
            //一個任務(wù)在經(jīng)歷重傳后依然失敗后回調(diào)此函數(shù)
            
        },onTaskRetry(task) {
            //開始重傳
            
        },onFinish(tasks){
            //所有任務(wù)結(jié)束后回調(diào)，注意，結(jié)束不等于都成功，該函數(shù)會在所有HTTP上傳請求響應(yīng)后回調(diào)(包括重傳請求)。
            
        }}
    }).build();
    
    
//如果auto設(shè)置為false,則需要手動啟動上傳。
//uploader.start();


//由于安全原因，display:none的file input，無法通過代碼調(diào)用click方法，必須通過如下處理，讓用戶來實現(xiàn)click，從而打開文件選擇窗口:

//你可以自行監(jiān)聽HTML元素的click事件，在回調(diào)函數(shù)內(nèi)部打開文件選擇窗口。你也可以使用jQuery監(jiān)聽，下面使用的是原生的JavaScript的方式。
button = document.getElementById("button");
button.addEventListener("click", function () {
    uploader.chooseFile();
}

0.0.9 (2016-10-21)

分塊上傳，自定義上傳域名

0.0.8 (2016-10-19)

fix bug,當沒有選中任何文件的時候，會觸發(fā)上傳函數(shù)。

0.0.7 (2016-10-19)

更換上傳域名為upload.qiniu.com

0.0.6 (2016-10-19)

繞過緩存，避免每次都上傳同樣的文件。

0.0.5 (2016-10-19)

tokenFunc(setToken,task)增加task參數(shù)

0.0.4 (2016-10-19)

修復了一個關(guān)于accept選項的bug。

0.0.3 (2016-10-19)

任務(wù)攔截器實現(xiàn)。

0.0.2 (2016-10-19)

基本功能的實現(xiàn)。

知乎 : @面條

Github : @lsxiao

MIT