七牛云纯js多图片添加

1： 使用前端插件选择图片,我使用的是fileupload插件,插件如何使用不做详细陈述,也可以使用其他插件,前端html代码最主要部分是:

<div class="ncsc-upload-btn">
   <a href="javascript:void(0);">
      <span>
         <input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload"multiple="multiple" />
      </span>
      <p>图片上传</p>
   </a>
</div>

2：使用js提交， __IMG__:此地址为七牛云空间对应的地址

$("#fileupload").change(function () {
    var files = this.files; console.log(files);//获取所有上传图片
    console.log(files);
    $.each(files, function (index, file) {
        console.log(file);
        var key = file.name;
        key = Math.random().toString(36).substr(2);
        console.log(key);
        var observer = {
            next(res){
                var total = res.total;
                if(total.percent==100) {//进度是否完成
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onloadend = function () {
                        var dataURL = reader.result;
                        img_url = __IMG__ + key;
                        console.log('img_url:' + img_url);
                    }
                }

            },
            error(err){//上传失败
                // ...
                console.log(err)
            },
            complete(res){//上传成功
                // ...
                console.log(res);
            }
        }
        var observable = qiniu.upload(file, key, token, putExtra, config);
        var subscription = observable.subscribe(observer) // 上传开始
    });
})