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

能够

我创建了一个引导模式弹出窗口来在图库页面中添加图片,我开发了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">&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发送图像吗?

拉吉普·保罗(Rajdeep Paul)

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

  • 设置以下选项,processData: falsecontentType: 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用ajax将js的发布数据发送到php,而无需进行类型转换

AJAX到PHP不会使用NODEJS将数据发送到数据库

我想使用 ajax 或任何其他方法将图像发送到数据库

如何使用ajax javascript PHP将大型json数据(250kb)发送到mysql数据库

PHP表单将除图像外的所有内容发送到数据库

如何使用Jquery和Ajax将Json数据发送到数据库中?

使用AJAX将数据发送到数据库失败

使用Jquery / ajax将数据发送到数据库

如何使用vue.js(ajax)将数据发送到数据库

使用XHR将图像发送到在线存储/数据库

使用Android将图像发送到MySQL数据库

使用javascript(客户端)将图像发送到数据库

将数据从VC发送到单元而无需转换

无需切换页面,通过php将html表单数据发送到数据库

如何使用Ajax将图像发送到PHP文件?

使用PHP将JSON信息发送到数据库?

如何使用PHP将时间发送到MySql数据库?

如何使用php将邮件从数据库发送到多个电子邮件列表

如何使用 PHP 将 HTML 输入字段发送到我的 MySQLi 数据库?

使用ajax将图像数据发送到php文件时遇到问题

存储表单值而无需将其发送到MySQL数据库进行支付网关处理的最佳方法

使用ajax将javascript数据发送到php

使用Ajax将数据从.js文件发送到.php

无法使用ajax将数据发送到php文件

使用AJAX和PHP将数据发送到mysql

使用.ajax将数据发送到php函数

当您通过“res.render”将数据发送到 HTML 模板时,使用 Ajax 获取 Mongodb 数据库

如何使用ajax将数据属性发送到laravel控制器(存储在数据库中)?

如何在不重新加载页面的情况下使用AJAX将表单值发送到php?