使用 XMLHttpRequest 上传文件

Posted 2023-02-24

【中文标题】使用 XMLHttpRequest 上传文件

【英文标题】：Uploading files using XMLHttpRequest

【发布时间】：2012-06-08 10:33:17

【问题描述】：

我正在尝试在 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 访问文件。

【参考方案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

【讨论】：

console.log(xhr.responseText);

您的网络浏览器是什么？请注意XMLHttpRequest在IE中不起作用。

我正在使用 Chrome 金丝雀。感谢您的所有帮助，但它仍然无法正常工作，似乎根本没有发送文件。

你尝试在 JavaScript 代码中使用FormData 吗？答案已编辑，请再次检查

有一些解决方案可以解决这个问题。首先启用您的 PHP error_handling 并将其设置为 E_ALL，现在您可能会看到一些错误或警告。如果这没有帮助，请参阅此问题：***.com/questions/5659340/… 将X-File-Type 和X-File-Name 添加到您的标头（在xhr 请求中），并用true 填充xhr.open 中的第三个参数。