效果如下:
入口
<div class="layui-form-item">
<div class="layui-upload" style="width: 90%">
<button type="button" class="layui-btn" id="upload"><i class="layui-icon"></i>上传图片</button>
<span style="color: red"> (可上传多张照片)</span>
<input type="button" id="btnHide9" style="display: none" class="none">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;height: 130px;width: 620px">
<ul id="demo9" class="layui-upload-list">
</ul>
</blockquote>
<input type="hidden" name="imgUrl" id="imgUrl">
</div>
</div>
其中 imgUrl 为上传字段(保存url的)
css 样式
#demo9 {
margin: 0 auto;
font-size: 0;
}
#demo9 li {
display: inline-block;
width: 150px;
padding-top: 1%;
}
#demo9 li img {
width: 100%;
}
.removeBtn {
position: absolute;
top: 2px;
right: 35px;
z-index: 11;
border: 0px;
border-radius: 50px;
background: red;
width: 22px;
height: 22px;
color: white;
font-size: 25px;
line-height: 25px;
}
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/showPhoto1/css/viewer.css">
<script src="${pageContext.request.contextPath}/js/showPhoto1/js/viewer.js"></script>
upload = layer.upload; //自己引入upload