JS同时上传表单图片和表单信息并把上传信息存入数据库，带php后端源码

最新推荐文章于 2023-05-21 17:54:34 发布

a_靖

最新推荐文章于 2023-05-21 17:54:34 发布

阅读量6.3k

点赞数

分类专栏： PHP JS Web前端文章标签： PHP接收前端上传的图片并存入服务器 HTML上传图片 PHP上传图片 HTML上传图片php接收并存入服务器图片地址存入数据库 html上传图片和文字并存入数据库

本文链接：https://blog.csdn.net/qq_35713752/article/details/81192329

版权

Web前端同时被 3 个专栏收录

389 篇文章 24 订阅

订阅专栏

186 篇文章 4 订阅

订阅专栏

PHP

62 篇文章 2 订阅

订阅专栏

微信小程序开发交流qq群 581478349

承接微信小程序开发。扫码加微信。

利用JQ，jquery.form.js，bootstrap实现上传表单图片和表单信息并把上传的图片地址，input填写的信息存入数据库，上传的图片存入服务器。

效果

前端：

<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
		<script src="js/JQF.js"></script>
		<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
	</head>

	<body>
		<form id="form1" method="post" enctype="multipart/form-data">

			<div class="form-group">
				<label class="sr-only" for="name">名称</label>
				<input type="text" class="form-control" name="chat_name" placeholder="请输入聊天室名称">
			</div>
			<div class="form-group">
				<label class="sr-only" for="inputfile">文件输入</label>
				<input type="file" name="file">
			</div>
			<button id="ok" class="btn btn-default">提交</button>
		</form>

		<!-- 其实我们可以把iframe标签隐藏掉 -->
		<script type="text/javascript">
			$("#ok").click(function() {
				console.log('123')
				$("#form1").ajaxSubmit({
					url: "http://localhost/M-IM/h5_upImg.php",
					type: "post",
					dataType: 'json',
					success: function(data) {
						alert("成功！");
					},
					error: function(data) {
					}
				});
			});
		</script>
	</body>

</html>

后端：

<?php  
	header("Content-Type:text/html;charset=utf8"); 
	header("Access-Control-Allow-Origin: *"); //解决跨域
	header('Access-Control-Allow-Methods:POST');// 响应类型  
    $link=mysql_connect("localhost","root","root"); 
    mysql_select_db("merchant", $link); //选择数据库
    mysql_query("SET NAMES utf8");//解决中文乱码问题
 header("Content-Type:text/html;charset=utf8");
	if ($_FILES["file"]["error"] > 0)  
	  {  
	  echo "错误: " . $_FILES["file"]["error"] . "<br />";  
	  }  
	else  
	  {  
    $chat_name = $_POST['chat_name'];
    $chat_img='http://localhost/M-IM/chat_img/'.$_FILES['file']['name'];  
			//插入数据到数据库 
	$strsql = "insert into chat_room (chat_name,chat_img) values('$chat_name','$chat_img')";

			$result = @mysql_query($strsql);
	  }  

	      move_uploaded_file($_FILES["file"]["tmp_name"],  
	      "chat_img/" . $_FILES["file"]["name"]);  
	      echo "chat_img/" . $_FILES["file"]["name"];  
?>

a_靖

关注

0
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS同时上传表单图片和表单信息并把上传信息存入数据库，带php后端源码

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。利用JQ，jquery.form.js，bootstrap实现上传表单图片和表单信息并把上传的图片地址，input填写的信息存入数据库，上传的图片存入服务器。效果前端：<!DOCTYPE html><html> <head> <m...
复制链接

扫一扫