使用Ajax将图像发送到数据库(php)，而无需重新加载 [英] Send Image with Ajax to database (php) without reloading

问题描述

我创建了一个引导程序模态弹出表单，以在图库页面中添加图片，我开发了php& Ajax代码，因为我希望在这里不重新加载页面:-

I create a bootstrap modal popup form to add picture in gallery page, I developed the php & ajax code because i want without page reloading here :-

问题是当我想将图像发送到数据库时出现此错误

the problem is when I want to send image to database I show this error

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发送图像吗?

Can you help me to send image with ajax jQuery?

推荐答案

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

You need to make few changes in your AJAX script, such as:

• 在AJAX请求中设置以下选项processData: false和contentType: false.从文档，

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不要设置任何内容类型标头.

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
Type: Boolean or String
When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header.

和

processData (默认值:true)
类型:Boolean
默认情况下，作为对象传递到data选项的数据(从技术上讲，不是字符串)将被处理并转换为查询字符串，以适合默认的 content-type"application/x-www-form -urlencoded" .如果要发送DOMDocument或其他未处理的数据，请将此选项设置为false.

processData (default: true)
Type: Boolean
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

如果您通过AJAX上传文件，请使用

And if you're uploading file through AJAX, use FormData object. But keep in mind that old browsers don't support FormData object, FormData support starts from the following desktop browsers versions: IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+.

因此，以以下方式更改您的jQuery脚本，

So change your jQuery script in the following way,

$(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)，而无需重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！