用ajax上传多个文件

Question

我正在尝试制作一个脚本，以使用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);
    }
    }

});

对不起，草率的代码。 如果在循环期间检查xhr readyState和状态，则第一个为1和0，那么最后一个为好。

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

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

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

谢谢您的帮助。

Answer 1

你应该提取AJAX功能的代码在一个单独的功能-否则为封xhr.onload将使用当前的（在通话的时间）的值index_div -最有可能从最后一个周期。 同样， 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);
}