弹出页面的代码
html代码
<form class="layui-form" style="padding-top: 2%" lay-filter="goods-images-add">
<div class="layuimini-main">
<input type="hidden" id="files" name="files" value="">
<div class="layui-form-item" >
<p style="margin-left: 10px;color: #9b2208">
<b>
系统根据文件名称 自动匹配商品,支持JPG,JPEG,PNG格式图片
<br>
PCU607.jpg 对应PCU607封面主图
<br>
PCU607_1.jpg 对应PCU607第一张副图片
<br>
PCU607_2.jpg 对应PCU607第二张副图片
</b>
</p>
</div>
<div class="layui-form-item" >
<div class="layui-upload-drag" id="edm-upload" style="width: 89%;">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0">
<textarea placeholder="" class="layui-textarea" id="content" rows="17"></textarea>
</div>
</div>
</div>
</form>
<script>
var images = [];
layui.use(['form', 'jquery', 'upload',], function () {
var form = layui.form
, upload = layui.upload
, $ = layui.jquery;
upload.render({
elem: '#edm-upload'
,url: '/goods_images/upload'
,field:'file'
,accept:'file'
,before: function(obj){
layer.load();
}
,done: function(res){
layer.closeAll('loading');
if (res.code == 0){
layer.msg('上传成功');
images.push(res.data);
console.log(images)
var content = $('#content').val()
var msg = content+"上传文件【"+res.oldName+"】成功,文件信息:\n"+res.data+"\n\n"
$('#content').val(msg)
let datas = images.join(',');
$('#files').val(datas);
}else{
layer.closeAll('loading');
var content = $('#content').val()
var msg = content+"上传失败:系统异常\n"
$('#content').val(msg)
}
}
,error: function(index, upload){
layer.closeAll('loading');
var content = $('#content').val()
var msg = content+"上传失败:系统异常\n"
$('#content').val(msg)
}
});
form.render();
});
</script>
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b5a3fbeda44d9c31734bf85b14530f98.png)
点击弹出 窗口,以及点击保存并关闭发送请求
核心代码
<div class="layui-inline">
<button type="button" class="layui-btn goods-image-images">批量上传</button>
</div>
$('.goods-image-images').on('click', function (e) {
var content = layuimini.getHrefContent("/goods_images/images");
var openWH = layuimini.getOpenWidthHeight();
var index = layer.open({
title: '批量上传',
type: 1,
shade: 0.2,
maxmin: true,
area: ['30%', '80%'],
content: content
, btn: [ '保存并关闭', '取消']
, yes: function (index, layero) {
data = form.val("goods-images-add");
$.post('/edm/store', data, function (res) {
if (res.code == 1) {
layer.msg(res.data);
layer.close(index);
} else {
layer.msg(res.data);
return false;
}
}, 'json');
}
, btn2: function (index, layero) {
},
btnAlign: 'l'
});
$(window).on("resize", function () {
layer.full(index);
});
})
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/33bae943cb49dcc99e60e2686c68bdd0.png)