layui 多圖上傳

<div class="layui-form-item">
	<div class="layui-form-label">上傳附件</div>
	<div class="layui-input-block">
		<volist
			name="l_patentfile"
			id="vo"
		>
			<div class="file-item">
				<p>{$vo[patentfile_name]}</p>
				<div
					id="file_{$vo[patentfile_id]}"
					class="layui-upload-img"
				></div>
				<button
					type="button"
					class="layui-btn layui-btn-primary upBtn"
					data-file_id="{$vo[patentfile_id]}"
				>上傳圖片</button>
			</div>
		</volist>
	</div>
</div>

layui.use(['form', 'jquery', 'upload', 'layer'], function () {
	var form = layui.form
		, $ = layui.jquery
		, upload = layui.upload
		, layer = layui.layer

	$('[name=zz_name]').on('change input keyup blur', function () {
		$('#bankAccount').text($(this).val())
	}).triggerHandler('change')

	$('.upBtn').each(function () {
		var _this = this
		upload.render({
			elem: this
			, url: '__CONTROLLER__/upload'
			, done: function (res) {
				console.log(res)
				console.log($(_this).data('file_id'))
				$('#file_' + $(_this).data('file_id'))
					.css('background-image', 'url("' + res.fileName + '")')
					.data('src', res.fileName)
			}
		})
	})

	form.on('submit(*)', function (e) {
		//組裝附件
		var files = []
		_.each($('.file-item'), function (item) {
			console.log($(item).find('p').text())
			console.log($(item).find('div').data('src'))
			var title = $(item).find('p').text()
				, img = $(item).find('div').data('src')
			if (!img) {
				layer.msg('請上傳' + title, { icon: 2 })
				return false
			} else {
				files.push(title + ',' + img)
			}
		})
		$('[name=zz_files]').val(_.join(files, '|'))
		return false

	})

})

.layui-upload-img {
	border: 1px solid #777;
	display: block;
	width: 400px;
	height: 300px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 10px 0 10px 0;
}

.file-item p {
	margin-top: 10px;
}