要存储的图片地址是以逗号拼接后的字符串
<div id="div2" style="display:none;" class="layui-col-xs10 layui-form-item">
<label class="layui-form-label">图片</label>
<div class="layui-input-block layui-upload ">
<button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">
选择图片
</button>
<div class="layui-upload-list">
<table class="layui-table">
<colgroup>
<col style="min-width: 100px;">
<col width="150">
<col width="150">
<col width="260">
<col width="150">
</colgroup>
<thead>
<th>图片名</th>
<th>预览图</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</thead>
<tbody id="ID-upload-demo-files-list"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
</div>
<script>
layui.use(['admin', 'form', 'laydate'], function () {
var $ = layui.$,
admin = layui.admin,
form = layui.form,
laydate = layui.laydate,
upload = layui.upload,
element = layui.element,
table = layui.table,
picUrls = '',
videoUrls = '',
videoArr = [],
picArr = [],
videoIfOnTr = 0,
picIfOnTy = 0
// 制作多图片上传表格
admin.req({
url: layui.setter.api + '?m=score/spike',
done: function () {
form.render('select');
var pic_urls = $("#pic_urls").val();
if (pic_urls != '') {
var arr = pic_urls.split(",");
$.each(arr, function (i, item_url) {
picArr.push(item_url)
var tr = $(['<tr id="upload-">',
'<td>' + item_url + '</td>',
'<td><img src="' + item_url + '" alt="' + item_url + '" style="width: 90px; height: 90px;"></td>',
'<td>---</td>',
'<td>已上传</td>',
'<td>',
'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
'</td>',
'</tr>'].join(''));
$('#ID-upload-demo-files-list').append(tr);
// 删除
tr.find('.demo-delete').on('click', function () {
// delete arr[i]; // 删除对应的文件
picArr = picArr.filter(item => item !== item_url)
tr.remove(); // 删除表格行
picUrls = picArr.join(',')
layui.use('form', function () {
form.val('layuiadmin-form-role', {
'data[pic_urls]': picUrls
})
})
});
})
}
// 绑定按钮点击事件 picIfOnTy 判断是否已经选择文件
document.getElementById('ID-upload-demo-files-action').onclick = function(){
if (picArr.length === 0 && picIfOnTy === 0) {
layer.msg('请选择图片')
}
};
var uploadListIns = upload.render({
elem: '#ID-upload-demo-files',
elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
url: layui.setter.api + '?m=imagetool/upload_pic', // 实际使用时改成您自己的上传接口即可。
headers: {//通过 request 头传递 accesstoken->HTT`P_ACCESSTOKEN
token: layui.data('layuiAdmin').token
},
accept: 'image',
exts: 'png|gif|jpg|jpeg',
multiple: true,
number: 3,
auto: false,
bindAction: '#ID-upload-demo-files-action',
choose: function (obj) {
var that = this;
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
// 读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">',
'<td>' + file.name + '</td>',
'<td><img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;"></td>',
'<td>' + (file.size / 1024 / 1024).toFixed(1) + 'M</td>',
'<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
'<td>',
'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
'<button id="del-' + index + '" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
'</td>',
'</tr>'].join(''));
picIfOnTy += 1
// 单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
// 删除
tr.find('.demo-delete').on('click', function () {
picArr = picArr.filter(item => item !== $(this).val())
picUrls = picArr.join(',')
layui.use('form', function () {
form.val('layuiadmin-form-role', {
'data[pic_urls]': picUrls
})
})
delete files[index]; // 删除对应的文件
tr.remove(); // 删除表格行
// 清空 input file 值,以免删除后出现同名文件不可选
uploadListIns.config.elem.next()[0].value = '';
picIfOnTy -= 1
});
that.elemList.append(tr);
element.render('progress'); // 渲染新加的进度条组件
});
},
done: function (res, index, upload) { // 成功的回调
var that = this;
// if(res.code == 0){ // 上传成功
var tr = that.elemList.find('tr#upload-' + index)
var tds = tr.children();
// 显示删除
tds.eq(3).find('.demo-delete').removeClass('layui-hide');
// 显示重传
// tds.eq(3).find('.demo-reload').removeClass('layui-hide');
delete this.files[index]; // 删除文件队列已经上传成功的文件
that.elemList.find('button#del-' + index).val(res.data['src'])
picArr.push(res.data['src'])
picUrls = picArr.join(',')
// 执行其他逻辑,例如将地址存储到隐藏域或显示图片等
layui.use('form', function () {
form.val('layuiadmin-form-role', {
'data[pic_urls]': picUrls
})
})
return;
//}
this.error(index, upload);
},
allDone: function (obj) { // 多文件上传完毕后的状态回调
console.log(obj)
},
error: function (index, upload) { // 错误回调
var that = this;
var tr = that.elemList.find('tr#upload-' + index);
var tds = tr.children();
// 显示重传
tds.eq(3).find('.demo-reload').removeClass('layui-hide');
},
progress: function (n, elem, e) { // 注意:index 参数为 layui 2.6.6 新增
var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
$('.layui-progress-bar').attr('lay-percent', n + '%');
element.init();
element.progress('progress-demo-', n + '%'); // 执行进度条。n 即为返回的进度百分比
}
});
}
// }
})
</script>