javascript - 七牛云的上传图片 formdata 表单提交 可以上传多张图片吗？具体逻辑方法该怎么做？

Question

我已经完成了单张上传的form表单提交功能，用的就是他们的 js－sdk ，但是现在想多张上传，该如何去做？

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

form里有多个file控件选择了文件的话，new FormData的时候就会包含多个文件。要上传多张的话在表单里选择多个文件就可以了。
不过这样的话sdk里的这些代码可能就不适用了，计算整体进度那部分没问题，但是seccess里的代码好像只适合处理单个图片。如果不需要上传后显示这个图片的话可以去掉显示图片的那部分代码。

如果要显示上传成功的图片，也可以考虑提交时不把整个form转换成FormData，而是先检查有多少个选择了文件的file控件，每个控件生成一个单独的FormData对象，最后依次调用这个sdk。

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

// 依次循环……

这样的话sdk里的字符串要用累加的方式了，不过改起来简单