layui多文件列表上传文件夹

注意的是，该方法是修改layui内核的，所以在项目使用的时候需要下载layui.js，修改后不影响其他功能

1、下载一个未压缩的layui，如果没有，只能借助工具对代码进行格式化
2、完成【1】步骤后搜索 type=“file” 字符，如下图

3、替换那一行代码吧

// 原代码
n = e.elemFile = t(['<input class="' + u + '" type="file" accept="' + i.acceptMime + '" name="' + i.field + '"', i.multiple ? " multiple" : "", ">"].join("")),
// 替换代码
n = e.elemFile = t(['<input class="' + u + '" type="file" accept="' + i.acceptMime + '" name="' + i.field + '"', i.multiple ? " multiple" : "", ">", '<input class="' + u + '" type="file" webkitdirectory accept="' + i.acceptMime + '" name="' + i.field + '"', i.multiple ? " multiple" : "", ">"].join("")),

意思就是加一个选择文件夹的控件

4、搜索一下【i.elem.off(“upload.start”).on(“upload.start”, function() {】 这个吧，如下图，关键在与这里

// 原代码
i.elem.off("upload.start").on("upload.start", function() {

// 修改为
i.elem.off("upload.start").on("upload.start", function(data) {

// 然后在这方法里面找到这行代码
e.config.item = o, e.elemFile[(0].click()
// 修改为
// $(data.target).attr('data-choose') 是在按钮加的属性直，用来判断是选择单文件或者多文件还是选择文件夹
e.config.item = o, e.elemFile[($(data.target).attr('data-choose') == 'folder' ? 1 : 0)].click()

然后就是设置同步文件夹，搜索【p.prototype.upload】这个方法，在里面添加提交参数，如下图

添加上以下代码即可完成

r.append("file_path", o.webkitRelativePath.replace(o.name, ''));// 删除文件名得到文件夹路径
r.append("file_name", o.name);// 文件名称
r.append("file_size", o.size);// 文件大小

以下是案例

HTML代码

<div class="layui-upload">
    <button class="btn btn-primary mono_file">选择文件</button>
    <button class="btn btn-info mono_file" data-choose="folder">选择文件夹</button>
	<div class="layui-upload-list">
		<table class="layui-table">
			<thead>
				<tr>
					<th>文件名</th>
					<th>大小</th>
					<th>上传进度</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="fileList">
			</tbody>
		</table>
	</div>
</div>

Javascript代码

layui.use( [ 'upload', 'element', 'layer' ], function () {
	var $ = layui.jquery,upload = layui.upload,element = layui.element,layer = layui.layer;
	var uploadListIns = upload.render({
        elem: '.mono_file',
        elemList: $('#fileList'),
        url: 'https://httpbin.org/post',
        accept: 'file',
        multiple: true,
        number: 3,
        auto: false,
        bindAction: '#ListAction',
        choose: function(obj) {
            var that = this;
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result) {
                var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></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 值，以免删除后出现同名文件不可选
                });
    
                that.elemList.append(tr);
                element.render('progress'); //渲染新加的进度条组件
            });
        },
        done: function(res, index, upload) { //成功的回调
            var that = this;
            //if(res.code == 0){ //上传成功
            var tr = that.elemList.find('tr#upload-' + index),
            tds = tr.children();
            tds.eq(3).html(''); //清空操作
            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#upload-' + index),
            tds = tr.children();
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        },
        progress: function(n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
            element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
        }
    });
    
});