用ajax上传多个文件

Question

I'm trying to make a script to upload multiple files using ajax, and print them on the screen with a loading circle display.

The script is working for one file, but I have a problem to make it works for multiple files. I guess it a "scope" problem. But my JS knowledge is not that good.

Also, I'm only using standard JS, no jQuery.

Here's the script :

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

});

Sorry for the sloppy code. If I check the xhr readyState and status during the loop, the first(s) are 1 and 0, then the last one is good.

You can see I'm creating a new div for each uploaded file so I can print a thumbnail in it.

For what I understand, the code is processing while the ajax request is not done yet. The result is I only see the last file I submitted.

If I put a false to the async flag on xhr.open, it works but it doesn't show the loading gif of course.

Thank you for your help.

Answer 1

You should extract the code for AJAX functionality in a separate function - otherwise the closure for xhr.onload will use the current (at the time of calling) value of index_div - most probably the last one from the FOR cycle. Also, querySelector returns a collection - even if it finds just a single element, or even if it finds nothing. Also, you should use both event.dataTransfer and event.target in order to handle both drag/drop and normal clicking.

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