title: uploading multiple files with XMLHttprequest
body: <p>I am trying to make an asynchronous file upload form with progress in percent. I thought this might work with a FormData object but I don't think the post is working. nothing happens when I submit. I have checked and there are no bugs and it works without the javascript,so the PHP is OK is there something fundamentally wrong with the code?      </p>
  
  <pre><code>  var handleUpload = function(event){
        event.preventDefault();
        event.stopPropagation();
  
    var fileInput = document.getElementById('file');
    var data = new FormData();
  
    for(var i = 0; i &lt; fileInput.files.length; ++i){
       data.append('file[]',fileInput.files[i]);
  }
    var request = new XMLHttpRequest();
        request.upload.addEventListener('progress',function(event){
     if(event.lengthComputable){
  
        var percent = event.loaded / event.total;
        var progress = document.getElementById('upload_progress');
  
      while (progress.hasChildNones()){
             progress.removeChild(progress.firstChild);
           }
             progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%'));
     }
  });
  
             request.upload.addEventListener('load',function(event){
             document.getElementById('upload_progress').style.display = 'none';
  });
             request.upload.addEventListener('error',function(event){
             alert("failed");
  
  });
             request.open('POST','upload.php');
             request.setRequestHeader('Cache-Control','no-cache');
             document.getElementById('upload_progress').style.display = 'block';
  };
  
             window.addEventListener('load',function(event){
             var submit = document.getElementById('submit');
             submit.addEventListener('click',handleUpload);
  });
  </code></pre>
  
  <p>the html:</p>
  
  <pre><code>&lt;div id = "upload_progress"&gt;&lt;/div&gt;
  
  &lt;form id="form" action="" method="post" enctype="multipart/form-data"&gt;
      &lt;input id="file" name="file[]" type="file" multiple /&gt;&lt;br&gt;
      &lt;input type="submit" name="send" id ="submit" value="send"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and upload.php</p>
  
  <pre><code>if(!empty($_FILES['file'])){
      foreach  ($_FILES['file']['name'] as $key =&gt; $name) {
      move_uploaded_file($_FILES['file']['tmp_name'][$key],"myfiles/$name");
    }
  }
  </code></pre>