使用XMLHttpRequest上傳文件

Question

我試圖在JavaScript中使用drag and drop plugin來使用ajax上傳文件。

<script> 
DnD.on('#drop-area', { 

'drop': function (files, el) { 
    el.firstChild.nodeValue = 'Drag some files here.'; 
    var names = []; 
    [].forEach.call(files, function (file, i) { 
     names.push(file.name + ' (' + file.size + ' bytes)'); 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST','upload.php'); 
    xhr.setRequestHeader("Content-type", "multipart/form-data"); 
    xhr.send(file); 
    console.log(xhr.responseText); 
}); 
document.querySelector('#dropped-files p i').firstChild.nodeValue = names.join(', '); 
} 
}); 
</script> 

而這裏的upload.php的：

<?php 
print_r($_POST); 
?> 

基本上我沒有寫腳本上傳的文件還沒有，因爲我還是搞清楚我如何可以訪問數據，我已通過JavaScript發送。你能指導我下一步該做什麼？如何從upload.php訪問文件。

Answer 1

嘗試使用FormData而不是xhr：

var formData = new FormData(); 
formData.append("thefile", file); 
xhr.send(formData); 

您可以訪問您的文件與此array：

<?php var_dump($_FILES["thefile"]); ?> 

查看更多：http://www.w3schools.com/php/php_file_upload.asp