JS實現七牛上傳

七牛有js上傳的文檔和模板，但怒我直言，寫得真爛，文檔以下
https://developer.qiniu.com/kodo/sdk/1283/javascript

首先要引入三個js文件，plupload.full.min.js，qiniu.min.js，main.js
這些東西要去七牛模板文件裏面找，第一個好像是在plupload官網下載，plupload是一個js庫

而後複製下面這段代碼，改好裏面的參數，就能用了

////////////////////////////////////
// 畫成這樣子的是個人註釋
////////////////////////////////////

var option1 = {
    runtimes: 'html5,flash,html4',      // 上傳模式，依次退化
////////////////////////////////////
// 這個 id-pick 是選擇文件按鈕的id
////////////////////////////////////
    browse_button: 'id-pick',         // 上傳選擇的點選按鈕，必需
    // 在初始化時，uptoken，uptoken_url，uptoken_func三個參數中必須有一個被設置
    // 切若是提供了多個，其優先級爲uptoken > uptoken_url > uptoken_func
    // 其中uptoken是直接提供上傳憑證，uptoken_url是提供了獲取上傳憑證的地址，若是須要定製獲取uptoken的過程則能夠設置uptoken_func
////////////////////////////////////
// 獲取 uptoken 的方式，三選一，第二個比較靠譜
// 怎麼獲取 uptoken 要去看七牛的文檔
////////////////////////////////////
    // uptoken : '<Your upload token>', // uptoken是上傳憑證，由其餘程序生成
    uptoken_url: 'https://xxx.com',  // Ajax請求uptoken的Url，強烈建議設置（服務端提供）
    // uptoken_func: function(){    // 在須要獲取uptoken時，該方法會被調用
    //    // do something
    //    return uptoken;
    // },
    get_new_uptoken: false,             // 設置上傳文件的時候是否每次都從新獲取新的uptoken
    // downtoken_url: '/downtoken',
    // Ajax請求downToken的Url，私有空間時使用，JS-SDK將向該地址POST文件的key和domain，服務端返回的JSON必須包含url字段，url值爲該文件的下載地址
////////////////////////////////////
// 這個最好改爲true，爲了防止文件名重複
////////////////////////////////////
    unique_names: true,              // 默認false，key爲文件名。若開啓該選項，JS-SDK會爲每一個文件自動生成key（文件名）
    // save_key: true,                  // 默認false。若在服務端生成uptoken的上傳策略中指定了sava_key，則開啓，SDK在前端將不對key進行任何處理
////////////////////////////////////
// 這個填七牛空間的域名地址，域名 + 上面生成的文件名 = 下載地址
////////////////////////////////////
    domain: 'http://pwwfewfwfb.bkt.clouddn.com',     // bucket域名，下載資源時用到，必需
    container: 'container',             // 上傳區域DOM ID，默認是browser_button的父元素
    max_file_size: '30mb',             // 最大文件體積限制
    flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入flash，相對路徑
    max_retries: 3,                     // 上傳失敗最大重試次數
    dragdrop: true,                     // 開啓可拖曳上傳
    drop_element: 'container',          // 拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳
    chunk_size: '4mb',                  // 分塊上傳時，每塊的體積
////////////////////////////////////
// 若是這個爲true，那麼在選好文件就會自動上傳
// 若是爲false，選好文件之後不會上傳，還須要下一步觸發
// 這樣，uploader.start()，就能觸發上傳
////////////////////////////////////
    auto_start: false,                   // 選擇文件後自動上傳，若關閉須要本身綁定事件觸發上傳
    filters: {
        max_file_size: '30mb',
        prevent_duplicates: true,
        mime_types: [
            {title: "Audio files", extensions: "mp3"}
        ]
    },
    //x_vars : {
    //    查看自定義變量
    //    'time' : function(up,file) {
    //        var time = (new Date()).getTime();
    // do something with 'time'
    //        return time;
    //    },
    //    'size' : function(up,file) {
    //        var size = file.size;
    // do something with 'size'
    //        return size;
    //    }
    //},
    init: {
        'FilesAdded': function (up, files) {
            plupload.each(files, function (file) {
                // 文件添加進隊列後，處理相關的事情
            });
        },
        'BeforeUpload': function (up, file) {
            // 每一個文件上傳前，處理相關的事情
        },
        'UploadProgress': function (up, file) {
            // 每一個文件上傳時，處理相關的事情
        },
        'FileUploaded': function (up, file, info) {
            // 每一個文件上傳成功後，處理相關的事情
        },
        'Error': function (up, err, errTip) {
            //上傳出錯時，處理相關的事情
        },
        'UploadComplete': function () {
            //隊列文件處理完畢後，處理相關的事情
        },
        'Key': function (up, file) {
            // 若想在前端對每一個文件的key進行個性化處理，能夠配置該函數
            // 該配置必需要在unique_names: false，save_key: false時才生效
            var key = "";
            // do something with key here
            return key
        }
    }
}

var uploader = Qiniu.uploader(option1)

plupload文檔：
http://chaping.github.io/plupload/doc/

文檔：
http://www.restran.net/2014/04/26/qiniu-js-file-upload/
https://glacierbo.github.io/2017/11/08/qiniu/
http://www.javashuo.com/article/p-hkxoajga-ms.html
https://www.jianshu.com/p/9e694a505ad9
https://www.jianshu.com/p/c03e939c0cc1
https://github.com/qiniu/python-sdk/blob/master/qiniu/auth.py