layui多图上传(表单)带查看

HTML

<div class="layui-form-item">
	<div class="layui-form-label">banner</div>
	<div class="layui-input-inline">
		<input
			name="fair_banner"
			value="{$row[fair_banner]}"
			readonly
			class="layui-input viewImg"
			placeholder="请点击右侧按钮上传封面图片"
			lay-verify="required"
			lay-reqText="请上传banner"
		/>
	</div>
	<div class="layui-inline">
		<button
			type="button"
			class="layui-btn layui-btn upBtn"
		><i class="layui-icon layui-icon-upload"></i></button>
	</div>
</div>

<div class="layui-form-item">
	<div class="layui-form-label">展位分布图</div>
	<div class="layui-input-inline">
		<input
			name="fair_layout"
			value="{$row[fair_layout]}"
			readonly
			class="layui-input viewImg"
			placeholder="请点击右侧按钮上传展位分布图"
			lay-verify="required"
			lay-reqText="请上传展位分布图"
		/>
	</div>
	<div class="layui-inline">
		<button
			type="button"
			class="layui-btn layui-btn upBtn"
		><i class="layui-icon layui-icon-upload"></i></button>
	</div>
</div>

JavaScript

$(function(){
	$('.upBtn').each(function () {
		var _this = this
		upload.render({
			elem: this
			, size: 500
			, url: '__CONTROLLER__/layui_upload'
			, data: {
				path: 'fair'
			}
			, done: function (res) {
				$(_this)
					.closest('.layui-form-item')
					.find('.layui-input').val('/upload/fair/' + res.data.src)
			}
		})
	})
})
$('.viewImg').on('click', function () {
	var img = new Image()
	img.src = $(this).val()
	img.onload = function () {
		console.log(img.width)
	}
	img.onload = function () {
		var width = img.width
			, height = img.height
			, scaleWH = width / height
			, bigH = $(window).height() - 60
			, bigW = scaleWH * bigH
		console.log(img, $(this).val())
		if (bigW > 1000) {
			bigW = 1000
			bigH = bigW / scaleWH
		}
		layer.open({
			type: 1
			, title: false
			, closeBtn: 0
			, skin: 'layui-layer-nobg'
			, shadeClose: true
			, area: [bigW + 'px', bigH + 'px']
			, content: '<img src="' + img.src + '" width="' + bigW + '" height="' + bigH + '"/>'
			, scrollbar: true
		})
	}
})