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); }

Answer 2

在uploadPhoto()循环之后（之后）调用for，而不是在每次循环迭代结束时调用FormData。另外，将uploadPhoto声明移到循环之外。

我还修改了原始的“photo_id”参数以包含循环计数器值，因此每个文件都有不同的photo_id参数键。

此外，我将您对xhr.open的调用的最后一个参数更改为“true”。您的代码正在进行同步xhr调用。这通常是一个坏主意。我将最后一个参数切换为“false”，使您的xhr调用异步。

最后，我删除了if(files.length <= 6) { var formData = new FormData(); for(var i = 0; i < files.length; i++) { var id = getUuid(); formData.append('action', 'uploadPhoto'); formData.append('photo_' + i + "_id", id); formData.append('file'+id, files[i]); } uploadFile(formData); } function uploadFile(formData) { var xhr = new XMLHttpRequest(); xhr.open('POST', 'uploadPhoto.php', true); xhr.send(formData); } function getUuid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); return v.toString(16); }); }函数的id参数，因为您还是不使用它。

我还将上传功能的第一个字母改为小写。如果它是构造函数，则只应使用大写字母启动函数名称。这是一个广为接受的惯例。您的代码应如下所示：

{{1}}

getUuid函数来自https://stackoverflow.com/a/2117523/486979。请注意，它会生成version 4 UUID。

一次上传照片

2 个答案: