如下多图和表单同时提交,后端php将path,表单的title,desc写入mysql,同时图片上传至服务器iamge文件夹,php详细代码该如何写(目前是PDO操作mysql)?
<div id="submitDiv">
<form class="layui-form" id="albumform" >
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" id="title" name="title" required="" lay-verify="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<textarea id="desc" name="desc" required lay-verify="desc" placeholder="请输入" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<select id="type" name="type" lay-filter="type" lay-search lay-verify="required" class="selectUp">
<option value="">选择类型</option>
<option value="1">公告类</option>
<option value="2">分析案例</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin-top:7px">
<div class="layui-upload">
<input type="text" id="imgs" style="margin:5px 0 15px 0" name="imgs" placeholder="图片路径只读 且最多可传六张" readonly value="" required="" lay-verify="title" autocomplete="off" class="layui-input ">
<button type="button" class="layui-btn" id="selupimgs">选择图片</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top:10px;">
预览图:
<div class="layui-upload-list" style="display:flex;flex-wrap:wrap;" id="imgbox"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upimgs">立即提交</button>
</div>
</form>
</div>
<script>
layui.use(['upload', 'element', 'layer'], function () {
var $ = layui.jquery,
upload = layui.upload,
element = layui.element,
layer = layui.layer;
// 定义多图路径
let path = ''
//多图片上传定义实例
let uploadInst= upload.render({
elem: '#selupimgs',
url: 'uploadimg', //改成您自己的上传接口
multiple: true, // 是否支持多图上传
size:4096, // 上传大小限制kb
auto: false, // 是否自动上传
field:"img", // 上传字段名
number:6, // 最多可上传六张
acceptMime: 'image/*', // 上传文件类型
bindAction:"#upimgs", // 触发上传的按钮
choose: function (obj) {
//将每次选择的文件追加到文件队列
files = obj.pushFile();
obj.preview(function (index, file, result) {
let imgdom = `<div style="position: relative;">
<img id="lcimgs" src=${result} alt=${file.name} class="layui-upload-img" style=" height: 140px;margin:5px 3px;">
<span id="del${index}" style="cursor: pointer; position: absolute;top: 10px;right: 10px;z-index: 100" class="layui-badge">
<i class="layui-icon layui-icon-delete"></i></span>
</div> `
$(".layui-upload-list").append(imgdom)
//点击删除指定预上传图片
$(`#del${index}`).on('click',function(){
layer.confirm('确定要删除么',e =>{
delete files[index];//删除指定图片
$(this).parent().remove();
layer.close(e);
})
});
})
},
before: function(obj){
layer.load(1); //上传loading
},
done: function (res) {
if(path==""){
path = res.data
}else{
path = `${path},${res.data}`
}
$('input[name="imgs"]').val(path)
console.log(res);
//单个上传完毕
},
allDone: function(obj){ //当文件全部被提交后,才触发
$("#subimg").bind("click",function () {
let data = {
title: $('#title').val(),
desc: $("#desc").val(),
path: path
}
$.post('add',data,function () {
if(res.data == 200){
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
}
})
console.log('data',data)
return false
})
$("#subimg").trigger('click')
layer.closeAll('loading',{isOutAnim:true});
layer.msg('上传完成!总共上传'+obj.total+'个,成功'+obj.successful+'个,失败'+obj.aborted+'个')
},
error:function () {
layer.msg('上传失败,请稍后重试')
layer.closeAll('loading',{isOutAnim:true});
// uploadInst.upload();
}
})
})
</script>