javascript - Soumission du formulaire de données de téléchargement d'images de Qiniuyun. Plusieurs images peuvent-elles être téléchargées? Comment faire la méthode logique spécifique ?

Question

J'ai complété la fonction de soumission de formulaire pour un téléchargement unique, à l'aide de leur js-sdk, mais maintenant je souhaite télécharger plusieurs photos, comment dois-je procéder ?

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

S'il y a plusieurs contrôles de fichiers dans le formulaire et qu'un fichier est sélectionné, le nouveau FormData contiendra plusieurs fichiers. Si vous souhaitez télécharger plusieurs photos, sélectionnez simplement plusieurs fichiers dans le formulaire.
Mais dans ce cas, les codes du SDK peuvent ne pas être applicables. La partie calcul de la progression globale est correcte, mais le code en seccès semble ne convenir qu'au traitement d'une seule image. Si vous n'avez pas besoin d'afficher l'image après le téléchargement, vous pouvez supprimer la partie du code qui affiche l'image.

Si vous souhaitez afficher les images téléchargées avec succès, vous pouvez également envisager de ne pas convertir l'intégralité du formulaire en FormData lors de la soumission. Au lieu de cela, vérifiez d'abord le nombre de contrôles de fichiers avec les fichiers sélectionnés, chaque contrôle génère un objet FormData distinct, et enfin appelez-le. en séquence.

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

// 依次循环……

Dans ce cas, les chaînes du SDK devront être accumulées, mais c'est facile à changer