Как загрузить файл с использованием чистого ванильного javascript и php?

Question

У меня есть существующая форма html, которая загружает файл на сервер, как только пользователь выбирает файл изображения.

Я сделал что-то вроде этого.

//html code 
<input type="file" id="photo" name="photo" accept="image/*" /> 
// the usual html stuff 

document.getElementById('photo').addEventListener("change",uploadImage); 
function uploadImage() 
{ 
    var xhr = new XMLHttpRequest(); 

    xhr.open("POST","/upload.php",true);  
    xhr.setRequestHeader("Content-type","image"); 

    var file = document.getElementById('photo').files[0]; 
    if(file) 
    { 
     var formdata = new FormData(); 
     formdata.append("pic",file); 
     xhr.send(formdata); 
    } 
    xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4 && xhr.status == 200) 
    { 
      //some code 
    } 
}; 
} 

Но в моем php-файле я не могу получить доступ к этому загруженному файлу. Массив $_POST кажется пустым. Я сделал print_r за $_POST, и он дал Array(). Что я делаю не так?

Answer 1

Вы используете FormData, который работает очень точно так же, как в обычной форме.

Прежде всего, в файлах PHP не будет $_POST, а вместо этого в $_FILES, see the documentation.

Что эта документация упоминает, наряду с $_FILES буфером, является то, что вам нужно использовать multipart/form-data кодирования любой FormData передана через XMLHttpRequest будет иметь этот набор по умолчанию, но вы можете проверить это, если $_FILES остаются пустой. Вы должны удалить xhr.setRequestHeader("Content-type","image"); и пусть XHR объект справиться с этим, из - если это не сработает - добавить

xhr.setRequestHeader("Content-type","multipart/form-data"); 

Существует довольно хороший пример right here at stackoverflow