我创建了一个引导模式弹出窗口来在图库页面中添加图片,我开发了php&ajax代码,因为我希望在这里不重新加载页面:-
问题是当我想将图像发送到数据库时,我显示此错误
Notice: Undefined index: photo in ....
我无法发送图像。
这是我的ajax代码
$(function() {
//twitter bootstrap script
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "image.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#myModal").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
这是Image.php文件
include 'db.php';
if(isset($_POST['titre'])){
$titre = strip_tags($_POST['titre']);
$image_name = $_FILES['photo']['name'];
$image_tmp = $_FILES['photo']['tmp_name'];
$image_size = $_FILES['photo']['size'];
$image_ext = pathinfo($image_name, PATHINFO_EXTENSION);
$image_path = '../images/'.$image_name;
$image_db_path = 'images/'.$image_name;
if($image_size < 1000000000){
if($image_ext == 'jpg' || $image_ext == 'png' || $image_ext = 'gif'){
if(move_uploaded_file($image_tmp,$image_path)){
$ins_sql = "INSERT INTO media (Images_md, Id_Pro, Value, Title) VALUES ('$image_db_path', '0', 'galerie', '$titre')";
if(mysqli_query($conn,$ins_sql)){
echo '<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button"> × </button>
Success! Well done its submitted. </div>';
}else {
echo '
<div class="alert alert-danger alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button"> × </button>
Error ! Change few things. </div>';
}
}else {
echo '
<div class="alert alert-danger alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button"> × </button>
Sorry, Image hos not been uploaded. </div>
';
}
}
else {
echo '
<div class="alert alert-danger alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button"> × </button>
Please Add a jpg OR png OR gif Image. </div>
';
}
}else {
echo '
<div class="alert alert-danger alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button"> × </button>
Image File Size is much bigger then Expect. </div>
';
}
}
这是myModal代码:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ajouter Photo</h4>
</div>
<div class="modal-body">
<form class="contact">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Titre</label>
<div class="col-sm-10">
<input type="text" name="titre" class="form-control" placeholder="Titre"/>
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Photo</label>
<div class="col-sm-10">
<input type="file" name="photo" class="form-control" />
</div>
</div>
</form>
</div><br><br>
<div class="modal-footer">
<button class="btn btn-success" name="submit" id="submit">submit</button>
<a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
您能帮我用Ajax jQuery发送图像吗?
您需要在AJAX脚本中进行一些更改,例如:
设置以下选项,processData: false
并contentType: false
在您的AJAX请求中。从文档中,
的contentType(默认值:
'application/x-www-form-urlencoded; charset=UTF-8'
)
类型:Boolean
或者String
当发送数据到服务器时,使用该内容类型。默认值为“ application / x-www-form-urlencoded; charset = UTF-8”,在大多数情况下都可以。如果您将内容类型显式传递给$.ajax()
,则该内容类型将始终发送到服务器(即使未发送任何数据)。从jQuery 1.6开始,您可以通过false
告诉jQuery不要设置任何内容类型标头。
和
过程数据(默认值:
true
)
类型:Boolean
默认情况下,数据到数据选项传递作为一个对象(在技术上,不是字符串其它任何东西)将被处理并转换成一个查询字符串,以适应默认内容类型“应用程序/ x -www-form-urlencoded”。如果要发送DOMDocument或其他未处理的数据,请将此选项设置为false
。
如果要通过AJAX上传文件,请使用FormData对象。但是请记住,旧的浏览器不支持FormData对象,FormData支持从以下桌面浏览器版本开始:IE 10 +,Firefox 4.0 +,Chrome 7 +,Safari 5 +,Opera 12+。
因此,通过以下方式更改您的jQuery脚本,
$(function(){
//twitter bootstrap script
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "image.php",
data: new FormData($('form')[0]),
processData: false,
contentType: false,
success: function(msg){
$("#thanks").html(msg)
$("#myModal").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句