微信小程序开发交流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"];
?>