Ajax upload files

Question

Я тестирую загрузку файлов с помощью Ajax и PHP. Вышеупомянутый код преуспевает, не загружая файл почему?

{

<form method="post" enctype="multipart/form-data"> 
     <input id='files' type='file'> 
    </form> 
    <script> 

     document.getElementById('files').addEventListener('change', function (e) { 
      var file = this.files[0]; 
      console.log(file); 
      var xhr = new XMLHttpRequest(); 
      xhr.file = file; // not necessary if you create scopes like this 
      xhr.addEventListener('progress', function (e) { 
       var done = e.position || e.loaded, total = e.totalSize || e.total; 

      }, false); 
      if (xhr.upload) { 
       xhr.upload.onprogress = function (e) { 
        var done = e.position || e.loaded, total = e.totalSize || e.total; 

      } 
      xhr.onreadystatechange = function (e) { 
       if (4 == this.readyState) { 
        console.log(['xhr upload complete', e]); 
       } 
      }; 
      xhr.open('post', 'arxeia', true); 
      xhr.send(file); 
     }, false); 
    </script> 


</body>} 

ли вам вещь, которую я должен прикрепить пост обработчик?

Answer 1

вы должны использовать FormData для отправки файла

document.getElementById('files').addEventListener('change', function (e) { 
    var file = this.files[0]; 
    console.log(file); 
    var xhr = new XMLHttpRequest(); 
    var fd = new FormData(); 
    fd.append("file", file); 

    xhr.addEventListener('progress', function (e) { 
     var done = e.position || e.loaded, total = e.totalSize || e.total; 
    }, false); 
    if (xhr.upload) { 
     xhr.upload.onprogress = function (e) { 
      var done = e.position || e.loaded, total = e.totalSize || e.total; 
    } 
    xhr.onreadystatechange = function (e) { 
     if (4 == this.readyState) { 
      console.log(['xhr upload complete', e]); 
     } 
    }; 
    xhr.open('post', 'arxeia', true); 
    xhr.send(fd); 
}, false); 

вы затем сможете получить файл на сервере с $_FILES["file"]