javascript - Qiniuyun's upload image formdata form submission. Can multiple images be uploaded? How to do the specific logical method?

Question

I have completed the form submission function for single upload, using their js-sdk, but now I want to upload multiple photos, how should I do it?

var f = new FormData(document.getElementById("testform"));

$.ajax({
  url: 'http://upload.qiniu.com/',  // Different bucket zone has different upload url, you can get right url by the browser error massage when uploading a file with wrong upload url.
  type: 'POST',
  data: f,
  processData: false,
  contentType: false,
  xhr: function(){
    myXhr = $.ajaxSettings.xhr();  
    if(myXhr.upload){
      myXhr.upload.addEventListener('progress',function(e) {
        if (e.lengthComputable) {
          var percent = e.loaded/e.total*100;
          $progress.html('上传：' + e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
        }
      }, false);
    }
    return myXhr;
  },
  success: function(res) {
    var str = '<span>已上传：' + res.key + '</span>';
    if (res.key && res.key.match(/\.(jpg|jpeg|png|gif)$/)) {
      str += '<img src="' + domain + res.key + '"/>';
    }
    $uploadedResult.html(str);
  },
  error: function(res) {  
    $uploadedResult.html('上传失败：' + res.responseText);
  }

Answer 1

If there are multiple file controls in the form and a file is selected, new FormData will contain multiple files. If you want to upload multiple photos, just select multiple files in the form.
But in this case, the codes in the sdk may not be applicable. The part of calculating the overall progress is fine, but the code in seccess seems to be only suitable for processing a single image. If you do not need to display the image after uploading, you can remove the part of the code that displays the image.

If you want to display successfully uploaded images, you can also consider not converting the entire form into FormData when submitting. Instead, first check how many file controls there are with selected files, each control generates a separate FormData object, and finally call this in sequence. sdk.

// 假设form里有多个file控件
// 先创建空的对象
var formData = new FormData();
// 将第一个file控件里的文件追加进去
formData.append('file',document.querySelector("#formID input[type=file]").files[0]);
// ...调用sdk的代码上传图片

// 依次循环……

In this case, the strings in the SDK will have to be accumulated, but it is easy to change