gpt4 book ai didi

javascript - 如何使用纯 vanilla javascript 和 php 上传文件?

转载 作者:塔克拉玛干 更新时间:2023-11-03 05:38:00 25 4
gpt4 key购买 nike

我有一个现有的 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 , see the documentation .

该文档确实提到了什么,以及 $_FILES缓冲区,是你需要使用 multipart/form-data编码,任何 FormData通过 XMLHttpRequest 转移默认情况下将设置此设置,但如果 $_FILES 您可能需要检查它留空。您应该删除 xhr.setRequestHeader("Content-type","image");并让 XHR对象处理它,或者 - 如果这不起作用 - 添加

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

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

关于javascript - 如何使用纯 vanilla javascript 和 php 上传文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34548995/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com