layui+thymeleaf+jquery实现多图片，多视频的上传、预览、放大、编辑功能

最新推荐文章于 2024-07-22 15:19:55 发布

万物可爱_85

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量120

点赞数 1

文章标签： layui jquery 前端音视频视频

本文链接：https://blog.csdn.net/hnn567/article/details/140605052

版权

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);
}