通过上传文件XMLHtt prequest [英] Uploading files using XMLHttpRequest

问题描述

我想使用拖放在javascript下降插件使用Ajax上传文件。

I'm trying to use a drag and drop plugin in javascript to upload files using 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的：

And here's upload.php:

<?php
print_r($_POST);
?>

基本上我没有写上载文件中的脚本但因为我仍然搞清楚我如何可以访问我通过JavaScript已经发送的数据。你能指导我下一步该怎么做？如何从upload.php的访问文件。

Basically I haven't written the script to upload the file yet because I'm still figuring out how can I have access to the data that I've sent through JavaScript. Can you guide me on what to do next? How do I access the file from upload.php.

推荐答案

尝试使用 FORMDATA 而不是 XHR

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

您可以访问您的文件，这个阵列：

You have access to your file with this array:

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

查看更多：<一href="http://www.w3schools.com/php/php_file_upload.asp">http://www.w3schools.com/php/php_file_upload.asp

这篇关于通过上传文件XMLHtt prequest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！