layui的多文件列表上传功能前端代码

html页面的代码（注意：引入layui相关的css）：

<div class="layui-upload" style="margin-left: 130px">
            <button type="button" class=" layui-btn" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
            <div class="layui-upload-list layui-upList-minHeight">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="demoList">
                        <tr id="upload">
                            <td>xxx.txt</td>
                            <td>xxxkb</td>
                            <td>等待上传</td>
                            <td><button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" disabled>删除</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--            <div class="layui-form-item layui-btn-Center">
                    <div class="layui-input-block text-right">
                        <button type="button" class="layui-btn layui-btn-xs" id="choiceListAction">开始上传</button>
                        <button class="btn layui-btn layui-btn-xs layui-btn-primary js_close" id="quXiao" type="button">取消</button>
                    </div>
                </div> -->

        </div>		

　　js的编写（引入layui相关的js）：

layui.use(['upload','form','layer','laydate'], function(){
		  var $ = layui.jquery
		  ,upload = layui.upload
		  ,form = layui.form;
		  
		  //多文件列表示例
		$(function() {
			var uploadFile = {
				init: function() {
					this.upload();
				},
				//上传文件
				upload: function() {
					layui.use('upload', function() {
						var $ = layui.jquery,
							upload = layui.upload;
						//多文件列表示例
						var demoListView = $('#demoList'),
							uploadListIns = upload.render({
								elem: '#choiceList',
								url: '__PUBLIC__/static/file/uploadFile',
								accept: 'file',
								multiple: true,
								auto: true,
								bindAction: '#choiceListAction',
								choose: function(obj) {
									var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
									//读取本地文件
									obj.preview(function(index, file, result) {
										if($('#demoList tr td').eq(0).text() == 'xxx.txt') {
											$('#demoList').empty();
										}
										var tr = $(['<tr id="upload-' + index + '">',
											'<td>' + file.name + '</td>',
											'<td>' + (file.size / 1014).toFixed(1) + 'kb</td>',
											'<td>等待上传</td>',
											'<td>',
											'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
											'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
											'</td>',
											'</tr>'
										].join(''));

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

										//删除
										tr.find('.demo-delete').on('click', function() {
											delete files[index]; //删除对应的文件
											tr.remove();
											uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
										});
										demoListView.append(tr);
									});
								},
								done: function(res, index, upload) {
									if(res.code == 0) { //上传成功
										var tr = demoListView.find('tr#upload-' + index),
											tds = tr.children();
										tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
										tds.eq(3).html(''); //清空操作
										return delete this.files[index]; //删除文件队列已经上传成功的文件

									}
									this.error(index, upload, res.msg);
								},
								error: function(index, upload, msg) {
									var tr = demoListView.find('tr#upload-' + index),
										tds = tr.children();
									tds.eq(2).html('<span style="color: #FF5722;">' + msg + '</span>');
									tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
								}
							});
					});
				}

			}
			uploadFile.init();
		});

	});

　　效果图

 

转载于:https://www.cnblogs.com/front-girl/p/10576328.html