1.首先是前端的页面 这里放了主要的form表单内容
<form id="form">
<input name="names" type="text" placeholder="你的名字">
<input name="college" type="text" placeholder="你的学院">
<input name="home" type="text" placeholder="你的家乡">
<input name="qq" class="ipt" type="text" placeholder="你的QQ">
<input name="tel" class="ipt" type="text" placeholder="你的电话">
<input name="texts" maxlength="150" type="text" placeholder="你眼中的家乡(150字以内)" id="text"></input>
<input name="picture" multiple type="file">
<button type="button" id="submit">提交</button>
</form>
2.然后是js操作 这里包括了如何将file文件获取到,然后如何传入php
(jq操作获取到DOM对象,然后用ajax传入php)
<script>
// 获取所有文本输入框
var inputTextArr = $('input[type=text]')
$('#submit').click(function () {
var formData = new FormData()
// 循环文本输入框将信息写入formdata
inputTextArr.each(function (i, el) {
formData.append($(el).attr('name'), $(el).val())
})
// 获取图片写入formdata
var files = $('input[name=picture]')[0].files
for (var i = 0; i < files.length; i ++) {
// formData.append('imgs[]', files[i]) // 合并到一个字段提交
formData.append('imgs'+i, files[i]) // 用多个字段提交
}
// 文件数量 可选
formData.append('img_count', files.length)
// 提交
$.ajax({
url: './php/index.php',
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function(res, status, xhr) {
console.log(res)
alert('ajax成功');
},
error: function(xhr, status, error) {
alert('no');
}
})
})
</script>
3.php文件中 除了获取文件,其他的内容获取都很简单,只需要$_POST获取就可以了 还有这个系统其实是报名单,所以获取到的图片或文件进行了重命名为每个人的信息。
<?php
header("Content-Type;text/html;charset=utf-8");
$con=mysqli_connect("localhost", "root", "123456", "d1");
$program_char="utf8";
mysqli_set_charset($con,$program_char);
if(mysqli_connect_errno($con)){
echo "连接数据库失败".mysqli_connect_error();
}
$names = $_POST['names'];
$college = $_POST['college'];
$home = $_POST['home'];
$tel = $_POST['tel'];
$texts= $_POST['texts'];
$qq= $_POST['qq'];
$files = $_FILES;
$picture = [];
$static_path = dirname(__DIR__) . '/photos/';
// 目录不存在则创建
if (!file_exists($static_path)) {
mkdir($static_path);
}
// 遍历接收文件
// 这里是以一个图片一个字段上传的
$count=0;
foreach ($files as $img) {
// 生成一个hash
//$hash = md5(time().rand(1000, 9999));
// // 文件后缀
$ext = array_reverse(explode('.', $img['name']))[0];
// // 文件名hash+后缀
//$filename = $hash.'.'.$ext;
$filename=$names.'-'.$tel.'-'.$count.'-'.'.'.$ext;
$count++;
$filepath = $static_path.$filename;
// 保存文件
move_uploaded_file($img['tmp_name'], $filepath);
// 保存路径到图片路径数组
array_push($picture, $filepath);
}
var_dump($picture);
// 用逗号连接图片路径,作为一个字段写入数据库
$picture_text = implode(',', $picture);
// 用逗号连接图片路径,作为一个字段写入数据库
$picture_text = implode(',', $picture);
// sql语句
/*
$sql = sprintf("insert into `article`
(`name`, `college`, `home`, `text`,`tel`,`qq`, `imgs`, `create_time`)
values ('%s', '%s', '%s', '%s', '%s', '%s','%s','%s')",
$name, $college, $home, $text, $tel,$qq,$picture_text, date('Y-m-d H:i:s'));
var_dump($sql);
*/
$sql2="INSERT INTO article(names,college,home,texts,tel,qq,imgs) VALUES('$names','$college','$home','$texts','$tel','$qq','$picture_text')";
//$sql1="INSERT INTO article(names,college) VALUES('$name11','$college1')";
$result=mysqli_query($con,$sql2);
if (!$result) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
// mysqli_query('', ')
?>
最后:
php代码中的数据库代码上 都是我自己的数据库名,所以需要换成你的,可以对应我下图我的数据库表单来更换:
ps:
上传的文件储存在了同级的photo页面中:
但是汉字出现了乱码的效果,经大佬指点,只要把utf-8改一下就行了
改成:
ps:上传的图片效果:
感谢大佬指点 教会我图片怎么上传到php中 学会了!!