研究了好多方法，网上也是一大堆，感觉都满足不了我的需求，今天呢，就给大家介绍一下Layui多图上传同表单一起提交的方法，且预览图片和删除图片都是在前端实现，无需请求删除接口， 这里图片设置不自动上传，用按钮触发，触发上传图片的同时，等所有图片上传完了，在用trigger触发表单提交的方法(图片上传完成后在allDone回调中保存接口返回的图片地址同form表单一同提交即可)，废话不多说上代码
html代码
<div class="layui-fluid">
<div class="layui-row">
<form class="layui-form" id="albumform" >
<div class="layui-form-item">
<label for="title" class="layui-form-label">
<span class="x-red">*</span>标题
<div class="layui-input-block">
<input type="text" id="title" name="title" required="" lay-verify="title"
autocomplete="off" class="layui-input">
<div class="layui-form-item">
<label for="desc" class="layui-form-label">
<span class="x-red">*</span>描述
<div class="layui-input-block">
<textarea id="desc" name="desc" required lay-verify="desc" placeholder="请输入"
class="layui-textarea">
<div class="layui-form-item">
<label class="layui-form-label">
<span class="x-red">*</span>图片
<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">选择图片
<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 class="layui-form-item">
<label for="sort" class="layui-form-label">
<span class="x-red">*</span>排序
<div class="layui-input-inline" style="margin-top:7px">
<input id="sort" maxlength="3" class="layui-input" type="text" name="sort"/>
<div class="layui-form-item">
<label for="subimg" class="layui-form-label">
<button type="button" class="layui-btn" id="upimgs">立即提交
<button type="submit" class="layui-btn" style="display:none" id="subimg">触发表单
</div>
JS 代码
// 定义多图路径
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(),
sort: $('#sort').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();
}
})
php代码
// 上传图片
public function uploadimg(){
$file = request()->file('img');
if($file){
// 成功上传后 获取上传信息;
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/album','');
$path = '/uploads/album/'.$info->getSaveName();
if($path){
return json(['code'=>200,'msg'=>'上传成功','data'=>$path]);
}
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}
// 添加
public function add(){
if(request()->isPost()){
$data = input('post.');
$album = new AlbumeModel();
$res = $album->save($data);
if($res){
return json(['code'=>200,'msg'=>'添加成功','data'=>[]]);
}else{
return json(['code'=>201,'msg'=>'添加失败','data'=>[]]);
}
}
return $this->fetch();
}
效果图
1587747393(1).png
1587747488(1).png
新手，大佬勿喷，如果有帮到大家，请收藏， 转发注明出处！
网友评论