javascript - 一次上传照片

Question

我正在尝试使用 XMLHttpRequest 对象同时上传更多照片。

 if(files.length <= 6) {   

    for(var i = 0; i < files.length; i++)   {

      var formData = new FormData();
      formData.append('action', 'uploadPhoto');
      formData.append('photo_id', id);
      formData.append('file'+id, files[i]);
      UploadFile(formData, id);   } 

    }

 function UploadFile(formData, id)  {   

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'uploadPhoto.php', false);   
 xhr.onload = function (){};   

xhr.send(formData); }

问题是照片上传是重复的。我认为发生这种情况是因为循环继续并且照片没有完成上传。

Answer 1

根据评论，您的 id 是一个随机数，我猜它在每次迭代中都需要是随机的。然而，您已将其设置在 for 循环之外，因此它将在每个循环中被覆盖，因此您只能看到上传的一个文件。根据您使用的随机函数，您有可能再次生成相同的数字，并以与您在此处执行的相同方式随机覆盖文件。

这里我采用了时间戳技术，它在您执行操作时始终是唯一的。试试这个:

if(files.length <= 6) {   

for(var i = 0; i < files.length; i++)   {

  var id =Date().getTime();
  var formData = new FormData();
  formData.append('action', 'uploadPhoto');
  formData.append('photo_id', id);
  formData.append('file'+id, files[i]);
  UploadFile(formData, id);   } 

}
 function UploadFile(formData, id)  {   

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'uploadPhoto.php', false);   
 xhr.onload = function (){};   

xhr.send(formData); }