javascript - Penyerahan borang borangdata imej muat naik Qiniuyun Bolehkah berbilang imej dimuat naik? Bagaimana untuk melakukan kaedah logik tertentu?

Question

Saya telah melengkapkan fungsi penyerahan borang untuk muat naik tunggal, menggunakan js-sdk mereka, tetapi sekarang saya ingin memuat naik berbilang foto, bagaimana saya harus melakukannya?

var f = FormData baharu(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

Jika terdapat berbilang kawalan fail dalam borang dan fail dipilih, FormData baharu akan mengandungi berbilang fail. Jika anda ingin memuat naik berbilang foto, cuma pilih berbilang fail dalam borang.
Tetapi dalam kes ini, kod dalam SDK mungkin tidak boleh digunakan Bahagian pengiraan kemajuan keseluruhan adalah baik, tetapi kod dalam seccess nampaknya hanya sesuai untuk memproses satu imej. Jika anda tidak perlu memaparkan imej selepas memuat naik, anda boleh mengalih keluar bahagian kod yang memaparkan imej tersebut.

Jika anda ingin memaparkan imej yang berjaya dimuat naik, anda juga boleh mempertimbangkan untuk tidak menukar keseluruhan borang ke dalam FormData, sebaliknya, semak dahulu berapa banyak kawalan fail yang ada dengan fail yang dipilih, setiap kawalan menjana objek FormData yang berasingan, dan akhirnya panggil ini. mengikut urutan.

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

// 依次循环……

Dalam kes ini, rentetan dalam SDK perlu dikumpul, tetapi ia mudah diubah