七牛云存储---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();
};