如何使用纯香草 javascript 和 php 上传文件？答案

【问题标题】：How to upload file using pure vanilla javascript and php?如何使用纯香草 javascript 和 php 上传文件？
【发布时间】：2016-04-05 13:51:22
【问题描述】：

我有一个现有的 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 数组似乎是空的。我为$_POST 做了一个print_r，它给了Array()。我做错了什么？

【问题讨论】：

您知道文件上传在$_FILES，而不是$_POST，对吗？
是的，那也是空的……
您不需要设置 content-type，因为 XHR 应该会自动检测到您已附加文件并使用 multipart/form-data。而且 php 也不理解 content-type image 这就是为什么你什么也得不到
我这样粗心的错误。你是对的。

标签： javascript php form-data

【解决方案1】：

您正在使用FormData，它的工作方式与普通表单的工作方式非常相似。

首先，PHP 中的文件不会在$_POST，而是在$_FILES，see the documentation。

该文档确实提到，连同$_FILES 缓冲区，您需要使用multipart/form-data 编码，通过XMLHttpRequest 传输的任何FormData 将默认设置此设置，尽管您可能想要检查$_FILES 是否为空。您应该删除 xhr.setRequestHeader("Content-type","image"); 并让 XHR 对象处理它，如果这不起作用 - 添加

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

有一个很好的例子right here at stackoverflow

【讨论】：

你是绝对正确的。我删除了它，现在我的 $_FILES 中有一些东西。