如何使用纯香草 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 数组似乎是空的。我为 $_POST 做了一个 print_r，它给出了 Array()。我做错了什么？

Answer 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");

有一个很好的例子

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

How to upload file using pure vanilla javascript and php?

javascript

php

form-data