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裡的字串要用累加的方式了，不過改起來簡單