layui+thymeleaf+jquery实现多图片，多视频的上传、预览、放大、编辑功能
html:
<!--多图片上传-->
<div class="layui-row layui-col-space10">
<div class="layui-form-item">
<div class="layui-form-item layui-form-text">
<label class="pm-form-label">多图片上传</label>
<div class="pm-input-block">
<button type="button" class="layui-btn" id="ID-upload-demo-btn-photo">
<i class="layui-icon layui-icon-upload"></i> 多图片上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图：
<div class="layui-upload-list" id="upload-demo-preview-photo">
<th:block th:if="${pmRepair!=null}">
<th:block th:each="photo:${pmRepair.photoUrlList }">
<div class="photo-item-box">
<img class="video-item enlarge-img" th:src="${photo}" alt="" style="width: 100px; height: 100px;">
<div class="photo-item-del" th:ids="${photo}">删除</div>
</div>
</th:block>
</th:block>
</div>
<!--放大镜-->
<div id="enlarge-div">
<div id="inner-div">
<img id="big-img" src=""/>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<!--多视频上传-->
<div class="layui-row layui-col-space10">
<div class="layui-form-item">
<div class="layui-form-item layui-form-text">
<label class="pm-form-label">多视频上传</label>
<div class="pm-input-block">
<button type="button" class="layui-btn" id="ID-upload-demo-btn-video">
<i class="layui-icon layui-icon-upload"></i> 多视频上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图：
<div class="layui-upload-list" id="upload-demo-preview-video">
<th:block th:if="${pmRepair!=null}">
<th:block th:each="video:${pmRepair.videoUrlList }">
<div class="video-item-box">
<video class="video-item" controls controlslist="" width="100px" height="100px" >
<source th:src="${video}" type="video/mp4" />
</video>
<div class="video-item-del" th:ids="${video}">删除</div>
</div>
</th:block>
</th:block>
</div>
</blockquote>
</div>
</div>
</div>
</div>
js：
<script th:inline="javascript">
// 多图片上传
var photoUrlList=[[${pmRepair?.photoUrlList}]] ? [[${pmRepair?.photoUrlList}]] :[];
// 多视频上传
var videoUrlList=[[${pmRepair?.videoUrlList}]] ? [[${pmRepair?.videoUrlList}]] : [];
// 多图片上传
upload.render({
elem: '#ID-upload-demo-btn-photo',
url: '/comm/xxxxx', // 上传接口。
multiple: true,
accept:'images',
before: function(obj){
// 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#upload-demo-preview-photo').append(
`
<div class="photo-item-box">
<img class="video-item enlarge-img" src="${result}" alt="" style="width: 100px; height: 100px;">
<div class="photo-item-del" ids="">删除</div>
</div>
`)
});
},
done: function(res){
// 上传完毕
photoUrlList.push(res.backurl)
// 删除标签上重新赋予地址
$(".photo-item-del").each(function (index,item){
// 重新渲染地址到删除标签上
for(let i=0;i<photoUrlList.length;i++){
if(index==i){
$(this).attr("ids",photoUrlList[i])
}
}
})
$(".enlarge-img").click(function () {
$("#big-img").attr("src", $(this).attr("src"));//设置#big-img元素的src属性
$("#enlarge-div").fadeIn("fast");//显示弹出层
$("#enlarge-div").click(function () {//关闭弹出层
$(this).fadeOut("fast");
});
})
}
});
// 多视频上传
upload.render({
elem: '#ID-upload-demo-btn-video',
url: '/comm/xxxxxxxx', // 上传接口。
multiple: true,
accept:'video',
before: function(obj){
// 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#upload-demo-preview-video').append(
`
<div class="video-item-box">
<video class="video-item" controls width="100px" height="100px" >
<source src="${result}" type="video/mp4" />
</video>
<div class="video-item-del" ids="">删除</div>
</div>
`
)
});
},
done: function(res){
// 上传完毕
videoUrlList.push(res.backurl)
// 删除标签上重新赋予地址
$(".video-item-del").each(function (index,item){
// 重新渲染地址到删除标签上
for(let i=0;i<videoUrlList.length;i++){
if(index==i){
$(this).attr("ids",videoUrlList[i])
}
}
})
}
});
// 图片删除
$(document).on("click",".photo-item-del",function (){
let ids=$(this).attr("ids");
let index=photoUrlList.indexOf(ids);
if(index!=-1){
photoUrlList.splice(index,1)
$(this).parent().remove()
}
})
// 视频删除
$(document).on("click",".video-item-del",function (){
let ids=$(this).attr("ids");
let index=videoUrlList.indexOf(ids);
if(index!=-1){
videoUrlList.splice(index,1)
$(this).parent().remove()
}
})
// 图片放大效果
$(".enlarge-img").click(function () {
$("#big-img").attr("src", $(this).attr("src"));//设置#big-img元素的src属性
$("#enlarge-div").fadeIn("fast");//显示弹出层
$("#enlarge-div").click(function () {//关闭弹出层
$(this).fadeOut("fast");
});
})
</script>
css:
blockquote{
margin-left: 60px;
margin-right: 60px;
}
.video-item-box,.photo-item-box{
display: inline-block;
width: 100px;
height: 136px;
text-align: center;
border: 1px solid #eee;
}
.video-item-del,.photo-item-del{
color: #0B7500;
cursor: pointer;
}
.photo-item-del{
margin-top: 6px;
}
/*放大镜效果*/
#enlarge-div {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
width: 100%;
height: 100%;
display: none;
}
#enlarge-div:hover {
cursor: zoom-out;
}
#enlarge-div #inner-div {
width: 80%;
height: 85%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#enlarge-div #inner-div #big-img {
/*width: 100%;*/
/*height: 100%;*/
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.enlarge-img {
cursor: zoom-in;
transition: all 0.6s;
border: 1px solid #eee;
}
.enlarge-img:hover {
transform: scale(1.4);
}
