使用AJAX传递图像文件不成功
Passing an image file is unsuccessful using AJAX
我在上传图像文件时遇到一个错误,无法通过AJAX传递图像文件。这是我的代码
AJAX
var file = $("#thumbnail").get(0).files[0];
alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file", file);
alert (formdata);
$.ajax({
url: "php/post-check.php",
type: "POST",
data: {
title: title,
thumbnail: formdata
},
success: function (data) {
$("div#postresult").removeClass("alert alert-danger");
$("div#postresult").html(data);
}
});
PHP
<?php
$target_dir = "../thumbnail-pictures/";
$target_file = $target_dir . basename($_FILES["thumbnail"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
if (file_exists($target_file)) {
echo "Sorry, thumbnail file already exists. <br>";
$uploadOk = 0;
}
if ($_FILES["thumbnail"]["size"] > 1000000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg") {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded, ";
} else {
if (move_uploaded_file($_FILES["thumbnail"]["tmp_name"], $target_file)) {
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
HTML
<form action="" method="post" enctype="multipart/form-data" id="newpost">
<div class="col-lg-12">
<div class="form-group">
<label>Title</label>
<input class="form-control" name="title" id="title" required>
</div>
<div class="form-group">
<label>Video Thumbnail **Only JPEG & PNG is accepted**</label>
<input type="file" name="thumbnail" id="thumbnail" accept="image/png, image/gif, image/jpeg" >
</div>
PHP代码本身运行良好,所以我认为问题出在AJAX部分,但我不确定如何解决这个问题。感谢您的帮助!
问题应该在参数processData上,请添加参数processData: false,
响应您的ajax请求,并尝试在php上获取您的图像。
$.ajax({
url: formURL,
type: form.attr('method'),
dataType: 'json',
data: formData,//form.serialize(),
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
beforeSend: function(){},
success: function(data, textStatus, jqXHR) {},
error: function(jqXHR, textStatus, errorThrown)
{
alert(jqXHR+ textStatus+ errorThrown);
},
complete: function(){}
});
希望有帮助。祝你好运
将您的输入正确地放在一个表单中,并使用FormData()
将表单作为一个整体发送。我建议这样做:
<form method="post" enctype="multipart/formdata" id="myForm">
<input type="text" name="title" />
<input type="file" name="thumbnail" />
</form>
使用js:构建并发送数据
var form = document.getElementById('myForm');
var formData = new FormData(form);
alert (formdata);
$.ajax({
url: "php/post-check.php",
type: "POST",
data: formData,
success: function (data) {
$("div#postresult").removeClass("alert alert-danger");
$("div#postresult").html(data);
}
});
现在你可以这样在php中获取数据:
$title = $_POST['title'];
$thumb = $_FILES['thumbnail'];
$tmp_file_path = $thumb['tmp_name'];
您可以使用ajaxForm()以异步方式发布整个表单,如下所示:
$("#newpost").ajaxForm({
success: function(data) {
$("div#postresult").removeClass("alert alert-danger");
$("div#postresult").html(data);
},
error: function(a, textStatus, exception) {
}
});
AjaxForm不是核心JQuery的一部分,但您可以在这里找到源代码和文档
相关文章:
- 使用压缩的JavaScript文件(不是运行时压缩)
- PERL-下载CSV文件不完整
- AJAX上传文件不起作用
- 在Hapi.js中提供静态JavaScript文件不起作用
- Javascript的行为与PHP包含文件不一致
- 如果文件不存在,fs.watch是否有错误处理程序
- 从HTML链接时,Javascript文件不起作用
- 如果下载不成功,如何显示消息
- Haskell调用Node.js文件不起作用
- 如何使用 Node.js 下载文件(不使用第三方库)
- Expressjs 静态文件不起作用
- 为什么PHP文件不用于(自定义)CSS和JS
- requireJS 中的车把加载不成功
- 使用 WebAPI 和 IE8/9 上传剑道文件不正确的错误消息
- NodeJS和ExpressJS-Javascript文件加载,但CSS文件不加载;t
- 通过ajax上传文件不会在MVC中的请求中附加文件
- 使用chrome.downloads.download,是否可以使文件不弹出下载栏
- javascript文件不可用的可能原因是什么;t成功加载
- 使用AJAX传递图像文件不成功
- Ajax文件检查成功后不改变变量