layui多图片上传

<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>
巴特西

layui多图片上传

最新文章

热门文章
