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

我有一个现有的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
    }
};
}

//html代码
//通常的html内容
document.getElementById（'photo'）。addEventListener（“更改”，上载图像）；
函数uploadImage（）
{
var xhr=new XMLHttpRequest（）；
open（“POST”，“/upload.php”，true）；
setRequestHeader（“内容类型”、“图像”）；
var file=document.getElementById（'photo'）。文件[0]；
如果（文件）
{
var formdata=new formdata（）；
formdata.append（“pic”，文件）；
xhr.send（formdata）；
}
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）
{
//一些代码
}
};
}

---

但是在我的php文件中，我无法访问这个上传的文件。

$\u POST

数组似乎为空。我为

$\u POST

做了一个

print\u r

，它给出了

Array（）

。我做错了什么？

您使用的是

FormData

，它的工作原理与普通表单非常相似

首先，在PHP中，文件不是在

$\u POST

中，而是在

$\u文件中

该文档与
$\u文件
缓冲区一起提到的是，您需要使用
多部分/表单数据
编码，通过
XMLHttpRequest
传输的任何
FormData
在默认情况下都将设置此项，尽管您可能希望检查
$\u文件
是否仍然为空。
您应该删除
xhr.setRequestHeader（“内容类型”、“图像”）
并让
XHR
对象处理它，当然-如果不起作用-添加

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

有一个很好的例子
你知道文件上传是在
$\u文件中
，而不是
$\u POST
，正确吗？是的，它也是空的…你不需要设置内容类型，因为XHR应该自动检测到你已经附加了一个文件，并使用
多部分/表单数据
。php也不理解内容类型
image
，这就是为什么我犯了这样一个粗心的错误。你是对的，你绝对是对的。我删除了它，现在我的
$\u文件中有了一些内容。