先放上几个用到的七牛官方网站：

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();
};