七牛雲存儲---JavaScript SDK 簡單上傳，走過的幾個坑

先放上幾個用到的七牛官方網站：

JavaScript SDK地址
須要在頁面中先引入 plupload 提供的 plupload.full.min.js（生產環境）
而後再引入SDK裏的 qiniu.min.js（生產環境）

在線生成uptoken地址
uptoken上傳須要用到，正式項目通常由後臺生成，這裏咱們作測試，用本身的ak、sk、bucketName去官方生成一個（有時效性）。
AK和SK：七牛帳號裏面提供。
bucketName：本身設定的七牛雲存儲空間名，建立存儲空間的時候注意地區(應該默認是華東)，不同地區須要修改下qiniu.min.js裏面指定的上傳的域名，請去參考官方文檔。
其它：可選的均可不填。

檢測uptoken是否可用地址(可否成功上傳)地址
token：上面生成的本身的token。
key：能夠不填。
關於測試生成的token是否可用，也能夠參考這個網站提供的demo，按他的說明修改demo裏面的兩個值就能夠判斷本身的token是否可用，而且有反饋，根據反饋的erro參考官方文檔。

關鍵代碼

html

<div id="container">
    <button id="pickfiles" >點擊上傳</button>
</div>

<script type="text/javascript" src="plupload.full.min.js"></script>
<script type="text/javascript" src="qiniu.min.js"></script>
<script type="text/javascript" src="main.js"></script>

這裏要用button標籤，而後id和js方法中Qiniu.uploader的browse_button綁定。
這裏用input標籤type="file"不行！

js

//引入Plupload 、qiniu.js後
  var uploader = Qiniu.uploader({
      runtimes: 'html5,flash,html4',    //上傳模式,依次退化
      browse_button: 'pickfiles',       //上傳選擇的點選按鈕，**必需**
      uptoken: 'myToken',
      //uptoken_url: '/token',            //Ajax請求upToken的Url，**強烈建議設置**（服務端提供）
      // uptoken: '', //若未指定uptoken_url,則必須指定 uptoken ,uptoken由其餘程序生成
      // unique_names: true, // 默認 false，key爲文件名。若開啓該選項，SDK爲自動生成上傳成功後的key（文件名）。
      // save_key: true,   // 默認 false。若在服務端生成uptoken的上傳策略中指定了 `sava_key`，則開啓，SDK會忽略對key的處理
      domain: 'myUrl',   //bucket 域名，下載資源時用到，**必需**
      get_new_uptoken: false,            //設置上傳文件的時候是否每次都從新獲取新的token
      container: 'container',                //上傳區域DOM ID，默認是browser_button的父元素，
      max_file_size: '100mb',           //最大文件體積限制
      flash_swf_url: 'Moxie.swf',       //引入flash,相對路徑
      max_retries: 3,                   //上傳失敗最大重試次數
      dragdrop: true,                   //開啓可拖曳上傳
      drop_element: 'container',        //拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳
      chunk_size: '4mb',                //分塊上傳時，每片的體積
      auto_start: true,                //選擇文件後自動上傳，若關閉須要本身綁定事件觸發上傳
      init: {
          'FilesAdded': function(up, files) {
              plupload.each(files, function(file) {
                  // 文件添加進隊列後,處理相關的事情
                  console.log(file.name);
              });
          },
          'BeforeUpload': function(up, file) {
                 // 每一個文件上傳前,處理相關的事情
          },
          'UploadProgress': function(up, file) {
                 // 每一個文件上傳時,處理相關的事情
          },
          'FileUploaded': function(up, file, info) {
                 // 每一個文件上傳成功後,處理相關的事情
                 // 其中 info 是文件上傳成功後，服務端返回的json，形式如
                 // {
                 //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                 //    "key": "gogopher.jpg"
                 //  }
                 // 參考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                 // var domain = up.getOption('domain');
                 // var res = parseJSON(info);
                 // var sourceLink = domain + res.key; 獲取上傳成功後的文件的Url
          },
          '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
          }
      }
  });

  // domain 爲七牛空間（bucket)對應的域名，選擇某個空間後能夠看到
  // uploader 爲一個plupload對象，繼承了全部plupload的方法，參考http://plupload.com/docs

document.getElementById('pickfiles').onclick = function() {
  uploader.start();
};