Javascript 使用ajax上传多个文件

我正在尝试制作一个脚本，使用ajax上传多个文件，并在屏幕上用加载循环显示打印它们

该脚本适用于一个文件，但我有一个问题，使其适用于多个文件。我想这是一个“范围”问题。但是我的JS知识不是很好

另外，我只使用标准JS，没有jQuery

以下是脚本：

var index_div = 0;
var dropper = document.querySelector('#upload');

dropper.addEventListener('dragover', function(e) {
        e.preventDefault(); // Annule l'interdiction de "drop"
    }, false);

dropper.addEventListener('dragenter', function() {
    dropper.style.borderStyle = 'solid';
});

dropper.addEventListener('dragleave', function() {
    dropper.style.borderStyle = 'dashed';
});

dropper.addEventListener('drop', function(e) {
    e.preventDefault();
    dropper.style.borderStyle = 'dashed';
    var files = e.dataTransfer.files,
        filesLen = files.length;
    for (var i = 0 ; i < filesLen ; i++) {
    var NomImage = files[i].name;
    if(files[i] != '')
    {
    if(window.XMLHttpRequest)
    {
        xhr=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var newDiv = document.createElement("div");
    newDiv.setAttribute("class","image_div");
    document.getElementById("upload").appendChild(newDiv); 
    document.getElementsByClassName("image_div")[index_div].innerHTML = '<img id="chargement" src="../includes/chargement.gif"/>';
    var form = new FormData();
    form.append('file', files[i]);
    xhr.open('POST', "./traitement_upload.php", true);
    xhr.onload = function (e) {
    if(xhr.readyState==4 && xhr.status==200)
    {
        document.getElementsByClassName("image_div")[index_div].innerHTML = 
xhr.responseText;
        index_div += 1;
    }
    }
    xhr.send(form);
    }
    }

});

var指数=0；
var dropper=document.querySelector（'#upload'）；
dropper.addEventListener（'dragover'，函数（e）{
e、 preventDefault（）；//取消“删除”的禁令
}，假）；
dropper.addEventListener（'dragenter'，function（）{
dropper.style.borderStyle='实心'；
});
dropper.addEventListener（'dragleave'，function（）{
dropper.style.borderStyle='虚线'；
});
dropper.addEventListener（'drop'，函数（e）{
e、 预防默认值（）；
dropper.style.borderStyle='虚线'；
var files=e.dataTransfer.files，
filesLen=files.length；
对于（var i=0；i

对不起，代码太草率了。如果我在循环过程中检查xhr readyState和status，第一个（s）是1和0，那么最后一个是好的

您可以看到，我正在为每个上传的文件创建一个新的div，以便在其中打印缩略图

据我所知，代码正在处理，而ajax请求尚未完成。结果是我只看到我提交的最后一个文件

如果我在xhr.open上的async标志上加上false，它会工作，但当然不会显示加载的gif

---

谢谢您的帮助。

您应该在单独的函数中提取AJAX功能的代码-否则

xhr.onload的闭包将使用
index\u div
的当前（调用时）值-很可能是for循环中的最后一个值。另外，
querySelector
返回一个集合，即使它只找到一个元素，或者什么也找不到。此外，您应该同时使用
event.dataTransfer
和
event.target
来处理拖放和正常单击

var dropper = document.getElementById('upload');

dropper.addEventListener('dragover', function(e) 
{
  e.preventDefault();
    dropper.style.background = '#eee';
}, false);

dropper.addEventListener('dragenter', function() 
{
  e.preventDefault();
    dropper.style.background = '#eee';
}, false);

dropper.addEventListener('dragleave', function() 
{
  e.preventDefault();
    dropper.style.background = '#fff';
}, false);

dropper.addEventListener('drop', uploadFile, false);
document.getElementById('file_upload').addEventListener('change', uploadFile, false);

function uploadFile(e) 
{
  e.preventDefault();
    dropper.style.background = '#fff';
    dropper.style.borderStyle = 'dashed';
    var files = (e.dataTransfer || e.target).files,
        filesLen = files.length;
    for (var i = 0 ; i < filesLen ; i++) 
    {
        if(files[i] != '')
        {
            var newDiv = document.createElement("div");
            newDiv.setAttribute("class","image_div");
            newDiv.innerHTML = '<img id="chargement" src="../includes/chargement.gif"/>';
            document.getElementById("upload").appendChild(newDiv); 

        doAJAX(newDiv,files[i]);
      }
    }
}

function doAJAX(div,file)
{
  var form = new FormData();
  form.append('file', file);

  if(window.XMLHttpRequest)
  {
      xhr=new XMLHttpRequest();
  }
  else if(window.ActiveXObject)
  {
      xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open('POST', "./traitement_upload.php", true);
  xhr.onload = function (e) 
  {
    if(xhr.readyState==4 && xhr.status==200)
    {
      div.innerHTML = xhr.responseText;
    }
  }
  xhr.send(form);
}

var dropper=document.getElementById（'upload'）；
dropper.addEventListener（'dragover'，函数（e）
{
e、 预防默认值（）；
dropper.style.background='#eee'；
}，假）；
dropper.addEventListener（'dragenter'，function（）
{
e、 预防默认值（）；
dropper.style.background='#eee'；
}，假）；
dropper.addEventListener（'dragleave'，function（）
{
e、 预防默认值（）；
dropper.style.background='#fff'；
}，假）；
dropper.addEventListener（'drop'，uploadFile，false）；
document.getElementById（'file_upload'）。addEventListener（'change'，uploadFile，false）；
函数上传文件（e）
{
e、 预防默认值（）；
dropper.style.background='#fff'；
dropper.style.borderStyle='虚线'；
var files=（e.dataTransfer | | e.target）.files，
filesLen=files.length；
对于（var i=0；i
您好，谢谢您的快速回答。我已经试过了，因为这是我从互联网上看到的范围问题中了解到的，但它仍然不起作用。如果我发送两个不同的图像，将只有一个图像，但重复。抱歉的双重评论。对于您的代码，有时它会显示相同的图像（如果我发送两个不同的图像，结果将是相同的图像两次），而其他时候，一个图像将加载并显示，而另一个图像将永远停留在加载gif上。如果您可以提供代码笔或JSFIDLE，这将更容易。很抱歉延迟。我试着创建一个JSFIDLE，这里就是一个例子：问题是没有php后端，所以它在这里工作得很好。您可能可以尝试为php后端和GIF加载程序指定绝对URL-