layui多文件上传表格

{layout name="layout" /}

<style>
	.ellipsis-cell {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fixed-table {
		table-layout: fixed;
	}
</style>

<div class="layui-card">
	<form class="layui-card-body layui-form">
		<div class="layui-form-item">
			<div class="layui-form-label required">项目名称</div>
			<div class="layui-input-block"><span class="layui-form-mid">{$project.title}</span></div>
		</div>
		{:input2('附件名称','title',$row.title,'required')}
		<div class="layui-form-item">
			<label class="layui-form-label required">文件列表</label>
			<div class="layui-input-block">

				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="choose-btn">选择文件</button>
				<div class="layui-upload-list">
					<table class="layui-table fixed-table" lay-size="sm">
						<colgroup>
							<col>
							<col width="80">
							<col width="60">
							<col width="80">
							<col width="100">
						</colgroup>
						<thead>
							<tr>
								<th>文件名</th>
								<th>大小</th>
								<th>扩展名</th>
								<th>上传进度</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="upload-files">
							{volist name="row.files_arr" id="vo"}
							<tr>
								<td data-src="{$vo.src}" title="{$vo.name}" class="ellipsis-cell">{$vo.name}</td>
								<td>{$vo.size}</td>
								<td>{$vo.ext}</td>
								<td>
									<div class="layui-progress">
										<div class="layui-progress-bar" lay-percent="100%"></div>
									</div>
								</td>
								<td>
									<div class="layui-btn-group">
										<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
										<a href="{$vo.src}" target="_blank" class="layui-btn layui-btn-xs">查看</a>
									</div>

								</td>
							</tr>
							{/volist}
						</tbody>
					</table>
				</div>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="upload-btn">开始上传</button>
			</div>
		</div>
		{:switch2('是否披露','is_show',$row.is_show)}
		{:submit2('提交','id',$row.id)}
		<input type="hidden" name="project_id" value="{$project.id}">
	</form>
</div>

<script>
	function main() {

		var uploadListIns = upload.render({
			elem: '#choose-btn'
			, elemList: $('#upload-files')
			, bindAction: '#upload-btn'
			, url: '/upload/index'
			, data: { 'path': '/project/' }
			, accept: 'file'
			, multiple: true
			, number: 10
			, auto: false
			, choose: function (obj) {
				var that = this
				var files = this.files = obj.pushFile()
				obj.preview(function (index, file, result) {
					var tr = $([
						'<tr id="file-' + index + '">'
						, '  <td title="' + file.name + '" class="ellipsis-cell">' + file.name + '</td>'
						, '  <td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
						, '<td>' + file.ext + '</td>'
						, '  <td><div class="layui-progress" lay-filter="progress-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
						, '  <td>'
						, '    <div class="layui-btn-group">'
						, '      <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>'
						, '      <button type="button" class="layui-btn layui-btn-xs layui-hide reload">重试</button>'
						, '    </div>'
						, '  </td>'
						, '</tr>'
					].join(''))

					// 单个重传
					tr.find('.reload').on('click', function () {
						obj.upload(index, file)
					})

					// 删除
					tr.find('.delete').on('click', function () {
						delete files[index]
						tr.remove()
						uploadListIns.config.elem.next()[0].value = ''
					})

					that.elemList.append(tr)
					element.render('progress')
				})

			}
			, done: function (res, index, upload) {
				var that = this
				if (res.ok == 1) {
					var tr = that.elemList.find('tr#file-' + index)
					var tds = tr.children()
					tds.eq(0).data('src', res.data.fullSrc)
					tds.eq(4).find('.reload').remove()
					tds.eq(4).find('.layui-btn-group').append('<a href="' + res.data.fullSrc + '" target="_blank" class="layui-btn layui-btn-xs">查看</a>')
					delete this.files[index]
					return
				}
				this.error(index, upload)
			}
			, allDone: function (obj) {
				// console.log(obj)
			}
			, error: function (index, upload) {
				var that = this
				var tr = that.elemList.find('tr#file-' + index)
				var tds = tr.children()
				tds.eq(4).find('.reload').removeClass('layui-hide')
				element.progress('progress-' + index, '0%')
			}
			, progress: function (n, elem, e, index) {
				element.progress('progress-' + index, n + '%')
			}
		})

		$('.delete').on('click', function () {
			$(this).parents('tr').remove()
		})


		form.on('submit(*)', function (e) {
			// 判断 uploadListIns.config.files 是否有子元素
			var filesObj = uploadListIns.config.files || {};
			var hasFiles = Object.keys(filesObj).length > 0;
			console.log('是否有子元素:', hasFiles, filesObj);
			if (hasFiles) {
				layer.msg('有选择的文件尚未上传', { icon: 5 });
				return false;
			}
			// 获取上传的文件列表
			var files = []
			$.each($('#upload-files').children('tr'), function (i, v) {
				var tds = $(v).children()
				var src = tds.eq(0).data('src')
				var name = tds.eq(0).text()
				var size = tds.eq(1).text()
				var ext = tds.eq(2).text()
				if (src) {
					files.push({ src: src, name: name, size: size, ext: ext })
				}
			})
			if (files.length == 0) {
				layer.msg('请上传附件', { icon: 5 })
				return false
			}

			e.field.files = JSON.stringify(files)
			e.field.is_show = e.field.is_show == 'on' ? 1 : 0

			console.log(e.field)
			submit('', e)
			return false
		})

	}
</script>