Use Qiniu to upload pictures and videos, simple and efficient. The official javascript – SDK address: developer.qiniu.com/kodo/sdk/12…

Common functions are:

1. Upload multiple or single images

2. Limit the upload format and size

3. Upload the file again

4. The upload is terminated

5. Calculate the upload progress

After qiniu.js is introduced, the configuration is explained

var uploader = Qiniu.uploader({ disable_statistics_report: true, makeLogFunc: 1, runtimes: 'html5,flash,html4', browse_button: 'pickimg', container: 'btnlist', max_file_size: '20mb', dragdrop: false, chunk_size: '4mb', multi_selection: true, uptoken_url: '/ management/upload/getqiniuuptoken. Do, / / token access address uptoken_func: function (file) {/ / access the address, if the token using var uptoken = ""; var url = ""; If (file. Type. IndexOf () "video" > 1 | | the self. The videoType. IndexOf (file. The name. The split ('. ') [1]) > 1) {/ / add video token handling url = ""; self.uploader.domain = ''; } if(file.type.indexOf("image")>-1){ url = ""; self.uploader.domain = ''; } $.ajax({ url: url, dataType: "json", type: "get", async: false, success: function (data) { uptoken = data.uptoken; }, error: function (a, b) { } }); return uptoken; }, unique_names: false, save_key: false, max_retries: 0, 'http://you2.autoimg.cn/', get_new_uptoken: true, auto_start: true,// Upload files automatically after selecting log_level: 0, init: {'FilesAdded': function (up, files) { self.processPercent = 0; self.uploadImgList ={ids:[],files:[]}; self.uploadImgList.files = files; Self.showuploadprocess = true; Self.uploadimgnum = files.length; self.uploadimgnum = files.length; imgMum = files.length; plupload.each(files, function (file) { if(file.type=='image/jpeg'||file.type=='image/jpg'||file.type=='image/png'||file.type=='image/bmp'){ }else{alert(" file format is not correct, please select JPG, PNG, BMP format image "); up.removeFile(file); self.showUploadProcess = false; return false; }}); }, 'BeforeUpload': function (up, file) { }, 'FileUploaded': function (up, file, If (info.status == "200") {var imgUrl = "http://you2.autoimg.cn/"+ json.parse (info.response).key; self.uploadImgList.ids.push(imgUrl); imgMum--; } if(imgMum == 0){ self.saveImg(self.uploadImgList.ids.join(',')); } }, 'UploadComplete':function(up, file, info){ }, 'Error': function (up, err, errTip) { }, 'Key': Function (up, file) {// If you want to personalize each file key in the front end, you can configure this function. // This configuration must be in unique_names: false, save_key: Var uuid = utils.uuid(); var key = "_autohomecar__zhouyouji/" + uuid + ".jpg"; return key; }, 'UploadProgress': function (up, file) { var files = up.files; var uploaded = 0; for(var i=0; i<files.length; i++){ uploaded += files[i].percent; } self.processPercent = parseInt(uploaded/(files.length*100)*100); }}});Copy the code

Note:

1. Realize the termination of upload. There is a stop method in the qiniu configuration, which supports the suspension of upload. The previous image will stop uploading.

2. If the position of the upload button changes (for example, the button disappears after being clicked), the implementation plan of Qiniu is to place a div in the position of the upload button, which contains the input used for real upload. Therefore, even if the upload button is hidden, clicking this position will still trigger the upload. It is recommended that the real upload button be placed on the edge and triggered manually by click

3.UploadProgress can obtain the UploadProgress percentage of uploaded files. If you want to obtain the total UploadProgress, you need to calculate it by yourself

4. Add retryUploadFile to qiniu.js: call uploader.retryuploadfile (fileId);

retryUploadFile: function(id){
    var file, count = 0, i;
    this.state = plupload.STARTED;
    // Find first QUEUED file
    if(files) {
        for (i = 0; i < files.length; i++) {
            if (files[i].id == id) {
                file = files[i];
                if (this.trigger("BeforeUpload", file)) {
                    file.status = plupload.UPLOADING;
                    this.trigger("UploadFile", file);
                }
            }
        }

        // All files are DONE or FAILED
        //if (count == files.length) {
            if (this.state !== plupload.STOPPED) {
                this.state = plupload.STOPPED;
                this.trigger("StateChanged");
            }
            this.trigger("UploadComplete", files);
        //}
    }
}
Copy the code