一次上传照片

upload photos at a time

本文关键字：照片 一次      更新时间：2023-09-26

我试图上传更多的照片在同一对象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); }

问题是照片上传是重复相同的。我想这是因为循环还在继续而上传的照片没有完成

从注释中可以看出，您的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); }

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

我还修改了原始的"photo_id"参数以包含循环计数器值，因此您将为每个文件拥有不同的photo_id参数键。

另外，我将您调用的最后一个参数更改为xhr。对"真实"敞开心扉。您的代码正在进行同步xhr调用。这通常是个坏主意。我将最后一个参数切换为"false"，使xhr调用异步化。

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

我还把你上传功能的第一个字母改成了小写。只有当函数是构造函数时，才应该以大写字母开头。这是一个广为接受的惯例。你的代码应该看起来像这样:

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。

相关文章：