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){// 预读本地文件示例，不支持ie8obj.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){// 预读本地文件示例，不支持ie8obj.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);
}
