首页 > 其他分享 >layui多图片上传

layui多图片上传

时间:2023-02-18 10:44:30浏览次数:29  
标签:function info layui mulPreview imgs mul 上传 图片

<div>
	<button type="button" class="layui-btn" id="mulUpload">图片上传</button>
	<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
		预览图:
		<div class="layui-upload-list" id="mulPreview"></div>
	</blockquote>
</div>

<link rel="stylesheet" href="/Public/viewer/viewer.min.css">
<script src="/Public/viewer/viewer.min.js"></script>

<script>
	var mul_imgs = ['http://i.srsr.cc/uploads/info/23021810323430.jpg', 'http://i.srsr.cc/uploads/info/23021810324186.jpg', 'http://i.srsr.cc/uploads/info/23021810324430.jpg', 'http://i.srsr.cc/uploads/info/23021810325261.jpg']

	function showImgs() {
		$('#mulPreview').empty()
		mul_imgs.forEach((img, index) => {
			$('#mulPreview').append(`
					<div style="background:url(${img}) center center no-repeat;">
						<img src="${img}" alt="图${index + 1}" />
						<i class="layui-icon layui-icon-close-fill" onclick="delImg(${index})"></i>
					</div>
				`)
			$('#mulPreview').viewer('update')
		})
	}

	function delImg(index) {
		mul_imgs.splice(index, 1)
		showImgs()
	}

	showImgs()

	layui.use(['upload', 'layer', 'form'], function () {
		let upload = layui.upload
		let layer = layui.layer
		let form = layui.form

		upload.render({
			elem: '#mulUpload'
			, url: '__CONTROLLER__/uploadImg' //此处配置你自己的上传接口即可
			, multiple: true
			, data: { path: '/info/' }
			, before: function (obj) {
				layer.load()
			}
			, done: function (res) {
				mul_imgs.push(res.data.fullSrc)
				console.log('mul_imgs', mul_imgs)
			}
			, allDone: function (res) {
				layer.closeAll('loading')
				showImgs()
			}
		})

	})
</script>

<style>
	#mulPreview {
		display: flex;
		flex-wrap: wrap;
	}

	#mulPreview div {
		margin: 0 16px 16px 0;
		position: relative;
		width: 150px;
		height: 150px;
		box-shadow: 0 2px 5px 1px #555;
		border-radius: 4px;
		background-size: cover !important;
	}

	#mulPreview div img {
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	#mulPreview div i {
		position: absolute;
		top: -5px;
		right: 5px;
		font-size: 30px;
		color: red;
		opacity: 0.6;
	}
</style>

标签:function,info,layui,mulPreview,imgs,mul,上传,图片
From: https://www.cnblogs.com/sunr/p/17132106.html

相关文章

  • 五、文件上传系列-秒传文件
    我们在使用云盘上传文件时会发现秒传文件,速度极快,这是怎么回事呢?秒传文件其实是因为我们要上传的文件前,服务端已经查询到该文件已经存在,没必须再传一份一模一样的文件,直接告......
  • Portswigger 靶场之“文件上传”
    FileuploadvulnerabilitiesAlllabs|WebSecurityAcademy(portswigger.net)1.Remotecodeexecutionviawebshellupload通过Webshell上传远程执行代码......
  • 原生上传
    <template><divstyle="display:flex;margin:0012px0;flex-wrap:wrap;"><templatev-if="files.length>0"><divclass="imgItem"v-for="(v,i)in......
  • day12-SpringMVC文件上传
    SpringMVC文件上传1.基本介绍SpringMVC为文件上传提供了直接的支持,这种支持是通过即插即用的MultipartResolver实现的。spring用JacartaCommonsFileUpload技术......
  • misc图片隐写------2023.2.17
    1,查看属性2.伪装成图片的压缩包一般这种图片看起来和普通图片没什么区别,但其实这个图片是由压缩包伪装成的,一般flag的文本文件就藏在这个压缩包中3,修改图片宽高4,将flag......
  • Java代码生成PDF2.0(包括文字图片)+PDF加水印+PDF转图片
    1.开源框架支持iText,生成PDF文档,还支持将XML、Html文件转化为PDF文件;(简单但是得下载软件)ApachePDFBox,生成、合并PDF文档;(类似于itext)docx4j,生成docx、pptx、xlsx文档,支......
  • SpringMVC09 - 文件的下载与上传
    文件下载ResponseEntity用于控制器方法的返回值类型,该控制器方法的返回值就是响应到浏览器的响应报文使用ResponseEntity实现下载文件的功能①浏览器触发下载<ath:href......
  • dokuwiki编辑器支持ppt上传
    ​ Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的......
  • yunUI组件库解析:图片上传与排序组件yImgPro
    yunUI是笔者开源的微信小程序功能库。目前其中包含了一些复杂的功能组件。方便使用。未来它将分为组件、样式、js三者合为一体,但分别提供。本文所用代码皆来源于组件库中的......
  • Layui中Table组件编辑状态时,使用回车或Tab进行每行间切换
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>预览</title><metaname="renderer"content="webkit"><metahttp-equiv="X-UA-Compati......