<div>
<button type="button" class="layui-btn" id="mulUpload">图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="mulPreview"></div>
</blockquote>
</div>
<link rel="stylesheet" href="/Public/viewer/viewer.min.css">
<script src="/Public/viewer/viewer.min.js"></script>
<script>
var mul_imgs = ['http://i.srsr.cc/uploads/info/23021810323430.jpg', 'http://i.srsr.cc/uploads/info/23021810324186.jpg', 'http://i.srsr.cc/uploads/info/23021810324430.jpg', 'http://i.srsr.cc/uploads/info/23021810325261.jpg']
function showImgs() {
$('#mulPreview').empty()
mul_imgs.forEach((img, index) => {
$('#mulPreview').append(`
<div style="background:url(${img}) center center no-repeat;">
<img src="${img}" alt="图${index + 1}" />
<i class="layui-icon layui-icon-close-fill" onclick="delImg(${index})"></i>
</div>
`)
$('#mulPreview').viewer('update')
})
}
function delImg(index) {
mul_imgs.splice(index, 1)
showImgs()
}
showImgs()
layui.use(['upload', 'layer', 'form'], function () {
let upload = layui.upload
let layer = layui.layer
let form = layui.form
upload.render({
elem: '#mulUpload'
, url: '__CONTROLLER__/uploadImg' //此处配置你自己的上传接口即可
, multiple: true
, data: { path: '/info/' }
, before: function (obj) {
layer.load()
}
, done: function (res) {
mul_imgs.push(res.data.fullSrc)
console.log('mul_imgs', mul_imgs)
}
, allDone: function (res) {
layer.closeAll('loading')
showImgs()
}
})
})
</script>
<style>
#mulPreview {
display: flex;
flex-wrap: wrap;
}
#mulPreview div {
margin: 0 16px 16px 0;
position: relative;
width: 150px;
height: 150px;
box-shadow: 0 2px 5px 1px #555;
border-radius: 4px;
background-size: cover !important;
}
#mulPreview div img {
width: 100%;
height: 100%;
opacity: 0;
}
#mulPreview div i {
position: absolute;
top: -5px;
right: 5px;
font-size: 30px;
color: red;
opacity: 0.6;
}
</style>
标签:function,info,layui,mulPreview,imgs,mul,上传,图片
From: https://www.cnblogs.com/sunr/p/17132106.html