我有一个from,它使用户可以使用文件对话框选择一些图像(最多15张图像)并进行预览。现在,我想在选择图像后将其上传到服务器。
我试图使用Ajax将它们上传到服务器(PHP),但这莫名其妙地行不通。
代码如下:
HTML:
<input type="file" id="imgDlg" name="imgDlg" onchange="preview_image()" accept="image/png, image/jpeg" />
<img src="#" id="preview"/>
Java脚本:
function preview_image() {
var file = document.getElementById("imgDlg").files[0];
var reader = new FileReader();
reader.onloadend = function ()
{
document.getElementById("preview").src = reader.result;
$.ajax
({
url : "uploads.php",
method : "POST",
data : {"name" : file.name, "source" : reader.result},
success : function(output)
{
alert("success");
if (output != "") {
alert(output);
}
}
});
}
if (file) {
reader.readAsDataURL(file);
}
}
PHP
if (isset($_POST['name']) || isset($_POST['source'])) {
echo $_POST['name'].'Successfuly uploaded';
// more stuff
} else {
echo 'Not Set';
}
由于某种原因,该代码不起作用。当通过文件对话框选择图像时,该图像出现在屏幕上,并警告“成功”,然后警告“未设置”。这意味着请求到达了服务器,但是变量丢失了。
我试图通过更改内容类型和其他属性来修复它,但是-没什么。
但是,如果我将php代码更改为:
if (isset($_GET['name']) || isset($_GET['source'])) {
echo $_GET['name'].'Successfuly uploaded';
// more stuff
} else {
echo 'Not Set';
}
然后并删除Ajax中的method: "POST",
行,
它仅对于很小的图像(最大1.5 KB)起作用(当然,在从文件对话框中选择图像之后,到达服务器并警告图像名称)。它起作用的原因是Ajax请求的默认方法是GET。
我的问题:为什么我的服务器不接受任何Ajax发布请求变量? 我做错了什么吗?
只需了解一下,那不是我的真实代码,当选择图片时,会在JavaScript中生成img
元素。
我检查了php.ini文件,启用了max_input_vars = 1000
行。
php.ini中的post_max_size
设置为8M
。
我还尝试使用jQuery $.post
并获得了相同的结果-没事。
摘要::我想在这里让用户上传图片,然后在屏幕上显示该图片,而我当时想将该图片上传到服务器,而不是将图像内容(Base 64字符串)保留在<input type="hidden"/>
之类的内容中,直到用户发布表单然后将其获取到服务器中-这甚至不是一个选择,因为我使用户能够上传大量图片(最多15张),在用户发布表单之前,我不希望这些图片的内容(以64为基数的字符串)加重我的表单,并且还要花更多的时间-发布该表单将花费很长时间一次,所有图像的内容,(当使用时张贴表格)。
网络上有很多关于此的文章/帖子/问答,我花了整整一个月的时间在我的网站上实际阅读并应用了其中的每一个,试图找出问题所在。我觉得我已经测试了很多可能的解决方案,但一无所获,所以我发布了这个问题。
由于 C,我成功解决了我的问题。 Ovidiu 在这里jQuery AJAX/POST not sending data to PHP提问。