layui中图片视频多文件的上传和下载

Mr.var

已于 2023-11-20 11:41:36 修改

阅读量915

点赞数

文章标签： layui 音视频前端

于 2023-11-20 10:39:34 首次发布

本文链接：https://blog.csdn.net/var200/article/details/134501714

版权

方式一：同步等待所有媒体文件上传且下载完成的模式。

        /* 文件删除按钮 */
		.layui-icon-close {
			z-index: 1;
			position: absolute;
			color: red;
			font-weight: bold;
			cursor: pointer;
		}

		/* 视频播放按钮 */
		.layui-icon-play {
			z-index: 1;
			position: absolute;
			color: white;
			left: 50%;
			transform: translateX(-50%);
			font-weight: bold;
			line-height: 100px;
			font-size: 22px;
		}

<div id="sqFileBox" colspan="3" style="height: 60px;">
	<button style="background-color: #196eab;float: left;" type="button" class="layui-btn" id="uploadsqFile">
      <i class="layui-icon">&#xe67c;</i>上传
	</button>
</div>

          //文件列表
          var sqFiles = []; 
          $(function() {
            uploadsqFile('#uploadsqFile', sqFiles, $("#sqFileBox"))
          })

            //上传文件
			function uploadsqFile(dom, fileArr, showDom) {
				layui.use('upload', function() {
					var element = layui.element;
					var upload = layui.upload;
					//执行实例
					var uploadInst = upload.render({
						elem: dom, //绑定元素
						accept: 'file',
						multiple: true,
						acceptMime: 'image/*,video/*',
						exts: 'jpg|jpeg|png|avi|mp4|rmvb',
						size: 1024 * 500,
						method: 'post',
						headers: {
							"stardon-token": getAuth()
						},
						url: lw_base_url + '/sysFile/upload', //上传接口
						progress: function(n, elem, res, index) {
							var percent = n + '%' //获取进度百分比
							element.progress('demo', percent); //可配合 layui 进度条元素使用
							element.progress('demo-' + index, n + '%'); //进度条
						},
						//上传之前的回调
						before: function(obj) {
							layer.open({
								title: '上传中...',
								closeBtn: 0,
								btn: [],
								content: '<div lay-filter="demo" class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-blue"></div></div>',
							})
						},
						done: function(res) {
							//上传完毕回调
							if (res.code == 0) {
								//判断加载事件执行的唯一标识
								res.data.loaded = false;
								fileArr.push(res.data);
								let suffix = res.data.fileName.slice(res.data.fileName.lastIndexOf('.') + 1)
									.toLowerCase();
								let timestamp = new Date().getTime();
								if (suffix.match("jpg") || suffix.match("png") || suffix.match("jpeg")) {
									showDom.append("<div id='" + res.data.fileKey +
										"' style='display:inline;position:relative;float:left;margin:5px;'>" +
										"<i οnclick='removesqFile(this.parentElement)' " +
										"class='layui-icon layui-icon-close' />" +
										"<img οnclick='checkImg(\"" + res.data.fileKey +
										"\")' style='height:100px;'></div>")
								} else {
									showDom.append("<div id='" + res.data.fileKey +
										"' style='display:inline;position:relative;float:left;margin:5px;'>" +
										"<i οnclick='removesqFile(this.parentElement)' " +
										"class='layui-icon layui-icon-close' />" +
										"<div οnclick='playVideo(" + JSON.stringify(res.data.fileKey) +
										")'><i class='layui-icon layui-icon-play' />" +
										"<video style='height:100px;' src='" +
										lw_base_url + "/sysFile/download?fileId=" + res.data.fileKey +
										"' /></div></div>")
								}
							}
						},
						allDone: function(obj) {
							//所有媒体文件上传且下载完毕之后再关闭加载层
							mediaLoadFinish();
						},
						error: function() {
							//请求异常回调
							alert("上传失败！");
							layer.closeAll();
						}
					});
				});
			}

			//判断图片或视频是否下载完
			var loadedMedia = 0; //记录已经加载完成的媒体
			function mediaLoadFinish() {
				var mediaElements = document.querySelectorAll("img, video");
				var totalMedia = mediaElements.length;
				mediaElements.forEach(function(media, index) {
					if (media.tagName === "IMG") {
						//src属性延后赋值，确保监听器代码在图片加载之前执行
						//确保事件监听器是在相关对象（图片和视频）被创建之后，但在它们开始加载数据之前添加的。
						media.src = lw_base_url + "/sysFile/download?fileId=" + sqFiles[index].fileKey;
						media.onload = function() {
							//浏览器存在缓存机制，同一张图片会重复触发load事件，确保load只触发一次
							if (!sqFiles[index].loaded) {
								loadedMedia++;
								console.log("图片加载")
								if (loadedMedia === totalMedia) {
									layer.closeAll();
								}
								// 设置标志为 true，表示事件已经执行过一次
								sqFiles[index].loaded = true;
							}
						};
					} else if (media.tagName === "VIDEO") {
						media.addEventListener("loadeddata", function() {
							loadedMedia++;
							console.log("视频加载")
							if (loadedMedia === totalMedia) {
								layer.closeAll();
							}
						});
						//若视频加载出错
						media.addEventListener('error', function() {
							loadedMedia++;
							console.log("视频加载错误");
							//点击略缩图下载视频
							media.parentElement.onclick = function(){
								window.open(media.src)
							}
							//隐藏视频
							media.style.display = 'none';
							//隐藏播放按钮
							var playBtn = media.parentElement.querySelector("i");
							playBtn.style.display = 'none';
							//显示略缩图
							var videoFirstImg = document.createElement('img')
							videoFirstImg.src = "../../../images/cant_play.png";
							videoFirstImg.style.height = "100px";

							media.parentElement.appendChild(videoFirstImg);
							if (loadedMedia === totalMedia) {
								layer.closeAll();
							}
						});
					}
				});
			}

			//删除文件
			function removesqFile(obj) {
				loadedMedia--;
				$("#" + obj.id + "").remove();
				sqFiles.forEach(function(item, index) {
					if (item.fileKey == obj.id) {
						sqFiles.splice(index, 1)
					}
				})
			}

            //点击查看图片
			function checkImg(url) {
				let imgList = [];
				let start = 0;
				let i = -1;
				sqFiles.forEach((imgObj, index) => {
					let suffix = imgObj.fileName.slice(imgObj.fileName.lastIndexOf(".") + 1).toLowerCase();
					if (suffix.match("jpg") || suffix.match("png") || suffix.match("jpeg")) {
						//确定查看图片的索引位置
						i += 1;
						if (imgObj.fileKey == url) {
							start = i;
						}
						let imgCheck = {
							"src": lw_base_url + "/sysFile/download?fileId=" + imgObj.fileKey, //原图地址
						};
						imgList.push(imgCheck);
					}
				});
				layer.photos({
					photos: {
						"start": start,
						"data": imgList,
					},
					anim: 5,
					success: slideEnlargement(),
					end: function() {},
				});
			}

			//滚轮滑动放大缩小图片
			function slideEnlargement() {
				//以鼠标位置为中心的图片滚动放大缩小
				$(document).on("mousewheel", ".layui-layer-photos", function(ev) {
					var oImg = this;
					var ev = event || window.event; //返回WheelEvent
					//ev.preventDefault();
					var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
					var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
						ratioT = (ev.clientY - oImg.offsetTop) / oImg.offsetHeight,
						ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
						w = parseInt(oImg.offsetWidth * ratioDelta),
						h = parseInt(oImg.offsetHeight * ratioDelta),
						l = Math.round(ev.clientX - (w * ratioL)),
						t = Math.round(ev.clientY - (h * ratioT));
					$(".layui-layer-photos").css({
						width: w,
						height: h,
						left: l,
						top: t
					});
					$("#layui-layer-photos").css({
						width: w,
						height: h
					});
				});
			}

			//查看视频
			function playVideo(url) {
				layer.open({
					area: ['80%', '90%'],
					type: 1,
					title: "视频播放",
					content: "<video style='width: 100%;height:100%;' controls='controls' src='" +
						lw_base_url + "/sysFile/download?fileId=" + url + "' />"
				});
			}

方式二：同步等待所有媒体文件上传，但下载异步的模式。（推荐，交互体验好）

        /* 文件删除按钮 */
		.layui-icon-close {
			z-index: 1;
			position: absolute;
			color: red;
			font-weight: bold;
			cursor: pointer;
		}

		/* 视频播放按钮 */
		.layui-icon-play {
			z-index: 1;
			position: absolute;
			color: white;
			left: 50%;
			transform: translateX(-50%);
			font-weight: bold;
			line-height: 100px;
			font-size: 22px;
		}
		
		/* 媒体加载效果 */
		.layui-icon-loading {
			z-index: 1;
			position: absolute;
			color: white;
			left: 50%;
			transform: translateX(-50%);
			font-weight: bold;
			line-height: 100px;
			font-size: 22px;
			color: grey;
		}

<div class="td_left" id="sqFileBox" colspan="3" style="height: 60px;">
	<button style="background-color: #196eab;float: left;" type="button" class="layui-btn" id="uploadsqFile">
      <i class="layui-icon">&#xe67c;</i>上传
	</button>
</div>

          //文件列表
          var sqFiles = []; 
          $(function() {
            uploadsqFile('#uploadsqFile', sqFiles, $("#sqFileBox"))
          })

            //上传文件
			function uploadsqFile(dom, fileArr, showDom) {
				layui.use('upload', function() {
					var element = layui.element;
					var upload = layui.upload;
					//执行实例
					var uploadInst = upload.render({
						elem: dom, //绑定元素
						accept: 'file',
						multiple: true,
						acceptMime: 'image/*,video/*',
						exts: 'jpg|jpeg|png|avi|mp4|rmvb',
						size: 1024 * 500,
						method: 'post',
						headers: {
							"stardon-token": getAuth()
						},
						url: lw_base_url + '/sysFile/upload', //上传接口
						progress: function(n, elem, res, index) {
							var percent = n + '%' //获取进度百分比
							element.progress('demo', percent); //可配合 layui 进度条元素使用
							element.progress('demo-' + index, n + '%'); //进度条
						},
						//上传之前的回调
						before: function(obj) {
							layer.open({
								title: '上传中...',
								closeBtn: 0,
								btn: [],
								content: '<div lay-filter="demo" class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-blue"></div></div>',
							})
						},
						done: function(res) {
							//上传完毕回调
							if (res.code == 0) {
								fileArr.push(res.data);
								let suffix = res.data.fileName.slice(res.data.fileName.lastIndexOf('.') + 1)
									.toLowerCase();
								let timestamp = new Date().getTime();
								if (suffix.match("jpg") || suffix.match("png") || suffix.match("jpeg")) {
									showDom.append("<div id='" + res.data.fileKey +
										"' style='display:inline;position:relative;float:left;margin:5px;height:100px;width:100px;'>" +
										"<i οnclick='removesqFile(this.parentElement)' " +
										"class='layui-icon layui-icon-close' />" +
										"<i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' />" +
										"<img οnlοad='loadedImg(this)' οnclick='checkImg(\"" + res.data.fileKey +
										"\")' src='" + lw_base_url +
										"/sysFile/download?fileId=" + res.data.fileKey +
										"' style='height:100px;'></div>");
								} else {
									showDom.append("<div id='" + res.data.fileKey +
										"' style='display:inline;position:relative;float:left;margin:5px;height:100px;width:100px;'>" +
										"<i οnclick='removesqFile(this.parentElement)' " +
										"class='layui-icon layui-icon-close' />" +
										"<i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' />" +
										"<div οnclick='playVideo(" + JSON.stringify(res.data.fileKey) +
										")'><i class='layui-icon layui-icon-play' />" +
										"<video οnlοadeddata='loadedVideo(this)' οnerrοr='loadErrorVideo(this)' style='height:100px;display:none;' src='" +
										lw_base_url + "/sysFile/download?fileId=" + res.data.fileKey +
										"' /></div></div>");
								}
							}
						},
						allDone: function(obj) {
							//所有媒体文件上传完毕之后再关闭加载层
							layer.closeAll();
						},
						error: function() {
							//请求异常回调
							alert("上传失败！");
							layer.closeAll();
						}
					});
				});
			}
			
			//图片等待下载后显示
			function loadedImg(imgDomObj) {
				//隐藏加载icon
				imgDomObj.parentElement.querySelector(".layui-icon-loading").style.display = 'none';
				//视频等同宽度
				imgDomObj.parentElement.style.width = imgDomObj.style.width;
				//显示加载完成的图片
				imgDomObj.style.display = "inline";
			}
			
			//视频等待下载后显示
			function loadedVideo(videoDomObj) {
				//隐藏加载icon
				videoDomObj.parentElement.parentElement.querySelector(".layui-icon-loading").style.display = 'none';
				//视频等同宽度
				videoDomObj.parentElement.parentElement.style.width = videoDomObj.style.width;
				//显示加载完成的视频
				videoDomObj.style.display = "inline";
			}
			
			//视频加载错误的显示
			function loadErrorVideo(videoDomObj) {
				//隐藏加载icon
				videoDomObj.parentElement.parentElement.querySelector(".layui-icon-loading").style.display = 'none';
				//隐藏视频
				videoDomObj.style.display = 'none';
				//隐藏播放按钮
				var playBtn = videoDomObj.parentElement.querySelector("i");
				playBtn.style.display = 'none';
				//显示略缩图
				var videoFirstImg = document.createElement('img')
				videoFirstImg.src = "../../../images/cant_play.png";
				videoFirstImg.style.height = "100px";
				videoDomObj.parentElement.appendChild(videoFirstImg);
				//视频等同宽度
				videoDomObj.parentElement.parentElement.style.width = videoFirstImg.style.width;
				//点击略缩图下载视频
				videoFirstImg.parentElement.onclick = function(){
					window.open(videoDomObj.src)
				}
			}

			//删除文件(申请材料)
			function removesqFile(obj) {
				$("#" + obj.id + "").remove();
				sqFiles.forEach(function(item, index) {
					if (item.fileKey == obj.id) {
						sqFiles.splice(index, 1)
					}
				})
			}

            //点击查看图片
			function checkImg(url) {
				let imgList = [];
				let start = 0;
				let i = -1;
				sqFiles.forEach((imgObj, index) => {
					let suffix = imgObj.fileName.slice(imgObj.fileName.lastIndexOf(".") + 1).toLowerCase();
					if (suffix.match("jpg") || suffix.match("png") || suffix.match("jpeg")) {
						//确定查看图片的索引位置
						i += 1;
						if (imgObj.fileKey == url) {
							start = i;
						}
						let imgCheck = {
							"src": lw_base_url + "/sysFile/download?fileId=" + imgObj.fileKey, //原图地址
						};
						imgList.push(imgCheck);
					}
				});
				layer.photos({
					photos: {
						"start": start,
						"data": imgList,
					},
					anim: 5,
					success: slideEnlargement(),
					end: function() {},
				});
			}

			//滚轮滑动放大缩小图片
			function slideEnlargement() {
				//以鼠标位置为中心的图片滚动放大缩小
				$(document).on("mousewheel", ".layui-layer-photos", function(ev) {
					var oImg = this;
					var ev = event || window.event; //返回WheelEvent
					//ev.preventDefault();
					var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
					var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
						ratioT = (ev.clientY - oImg.offsetTop) / oImg.offsetHeight,
						ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
						w = parseInt(oImg.offsetWidth * ratioDelta),
						h = parseInt(oImg.offsetHeight * ratioDelta),
						l = Math.round(ev.clientX - (w * ratioL)),
						t = Math.round(ev.clientY - (h * ratioT));
					$(".layui-layer-photos").css({
						width: w,
						height: h,
						left: l,
						top: t
					});
					$("#layui-layer-photos").css({
						width: w,
						height: h
					});
				});
			}

			//查看视频
			function playVideo(url) {
				layer.open({
					area: ['80%', '90%'],
					type: 1,
					title: "视频播放",
					content: "<video style='width: 100%;height:100%;' controls='controls' src='" +
						lw_base_url + "/sysFile/download?fileId=" + url + "' />"
				});
			}