1

我正在尝试使用对象 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); }

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

4

2 回答 2

0

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

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

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

最后，我删除了您的函数的 id 参数uploadPhoto，因为您无论如何都不使用它。

我还将您上传功能的第一个字母更改为小写。如果函数名是构造函数，则只能以大写字母开头。这是一个被广泛接受的约定。您的代码应如下所示：

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

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

于 2013-05-19T18:19:15.907 回答
0

从评论中可以看出，你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); }
于 2013-05-19T17:01:46.767 回答