我在通过ajax提交表单时遇到问题，如果没有ajax，它可以毫无问题地提交。
如果我在它自己使用它，图像上传正确：
<form id="edit_image1_form" action="upload_file.php" method="post" enctype="multipart/form-data">
<img id="edit_image1" src="<?php echo $venue_image_upload_one; ?>" alt="" />
<input type="file" name="file" id="file" onchange="readURL1(this);" style="width:155px;"><br>
<input type="submit" id="upload_image1_submit" name="upload_image1_submit" value="Update Image">
</form>
但是当我添加这个时，它会给我一个错误，并且没有上传完成：
$("#upload_image1_submit").click(function() {
var url = "upload_file.php";
$.ajax({
type: "POST",
url: url,
data: $("#edit_image1_form").serialize(), //form name here
success: function(data)
{
alert(data);
}
});
return false;
});
The error is Invalid File from here:
<?php
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20000)
&& in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("upload/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/" . $_FILES["file"]["name"]);
echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
}
}
}
else
{
echo "Invalid file"; //HERE
}
?>
但是我的问题是，如果我在没有ajax的情况下提交表单，我将不会收到此错误，并且我一直上传用于测试的图像是相同的。
关于这可能是什么的任何想法？
请参阅仅发送序列化表单不会在后期参数中发送图像，您需要附加文件。 这是我曾经用来使用 Ajax 上传图像的示例代码，它工作正常。
var imageUploaded = '';
formdata = false;
if (window.FormData) {
formdata = new FormData();
}
var reader, file;
if(jQuery('input[type=file]').get(0).files.length){
file = jQuery('input[type=file]').get(0).files[0];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
if (formdata) {
jQuery.ajax({
url: "your url",
type: "POST",
data: formdata,
dataType: 'json',
processData: false,
contentType: false,
async: false,
success: function (res) {
//do something here
}
});
}
在您的控制器或 Ajax URL 页面中，使用 $_FILES["images"]["name"] 获取图像。希望这可能有助于您的需求。
使用 XHR2，您可以使用 FormData 对象通过 AJAX 上传，但据我所知，旧版浏览器不支持此功能。
否则，您可以执行以下操作：
var form = new FormData();
form.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
type: "POST",
url: url,
data: form,
success: function(data)
{
console.log(data);
}
});