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

How to upload file using pure vanilla javascript and php?

本文关键字：php 文件 javascript 何使用 香草      更新时间：2023-09-26

我有一个现有的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()。我做错了什么？

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

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

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

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

这里有一个非常好的例子，在stackoverflow

相关文章：