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

Question

我有一个现有的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数组似乎是空的.我做了一个print_rfor $_POST,它给了Array().我究竟做错了什么？

Answer 1

您正在使用FormDatawhich 的工作方式与正常表单的工作方式非常相似。

首先，在 PHP 中的文件不会在$_POST，而是在 中$_FILES，请参阅文档。

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

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

在 stackoverflow 上有一个很好的例子