Question

我创建了一个bootstrap模式弹出窗体，用于在图库页面中添加图片，我开发了php＆amp; 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">&times;</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发送图片吗？

Answer 1

您需要在AJAX脚本中进行一些更改，例如：

在AJAX请求中设置以下选项processData: false和contentType: false。来自the documentation，


contentType （默认：'application/x-www-form-urlencoded; charset=UTF-8'）
  输入：Boolean或String
  将数据发送到服务器时，请使用此内容类型。默认为＆＃34; application / x-www-form-urlencoded; charset = UTF-8＆＃34;，这对大多数情况来说都没问题。如果您明确地将内容类型传递给$.ajax()，则它始终会发送到服务器（即使没有数据发送）。从jQuery 1.6开始，您可以传递false来告诉jQuery不要设置任何内容类型标头。

和


processData （默认：true）
  输入：Boolean
  默认情况下，作为对象传入数据选项的数据（技术上，不是字符串）将被处理并转换为查询字符串，适合默认的内容类型＆＃34; application / x- WWW窗体-urlencoded＆＃34; 即可。如果要发送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");
            }
        });
    });
});

使用Ajax将图像发送到数据库（php）而无需重新加载

1 个答案: