layui upload 多文件类型上传及上传文件限制类型
 
实际需求的话是用户通过不同对应的入口，上传多种类型的文件，并且在选择文件的时候，只能看到选择的文件类型。
 
 
点击不同的入口，限制选择的文件类型
 

 
 这是文件上传，类型限制最重要的几个属性，accept 我这里都是file ，都是文件类型。acceptMine这个属性是对应你调用成功后，筛选出对应文件类型的文件。exts是你设置可上传的文件类型，如果选择的其他类型的，是无法进行接口调用的。
 
 excel类型
 
var uploader = upload.render({ 
    elem: '#uploadExcel',
    url: '/web/doc/table/upload',  //改成您自己的上传接口
    headers: { "X-Access-Auth-Token": token },
    accept: 'file',
    acceptMime: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    exts: 'xlsx|xls', //只允许上传excel文件
    choose: function(obj){
      var index = layer.load();
    },
    done: function(res, index, upload){
      layer.close(layer.index);
    },
    error: function(err) {}
  });
 
csv类型
 
    accept: 'file',
    acceptMime: '.csv',
    exts: 'csv', //只允许上传csv文件
 
txt类型
 
    accept: 'file',
    acceptMime: 'text/plain',
    exts: 'txt', //只允许上传txt文件

**
 
layui upload 实现多文件上传
 
**
 
js引用：layui.js
 
下面展示代码：
 
var opera = layer.open({
                    type: 1,
                    title: '批量导入',
                    area: ['720px', '440px'], // 宽高
                    btnAlign: 'r', //'l'按钮左对齐，'c'按钮居中对齐,'r'按钮右对齐，默认右边
                    shadeClose: false, // 点击阴影关闭弹框
                    closeBtn: false,
                    content: '<div class="layui-upload">' +
                        '  <button type="button" style="margin-top: 10px;margin-left: 10px;" class="btn btn-primary btn-sm btn-rounded mgnR15" id="testList">选择多文件</button> ' +
                        '  <div class="layui-upload-list">' +
                        '    <table class="layui-table">' +
                        '      <thead>' +
                        '        <tr><th>文件名</th>' +
                        '        <th>大小</th>' +
                        '        <th>状态</th>' +
                        '        <th>操作</th>' +
                        '      </tr></thead>' +
                        '      <tbody id="demoList"></tbody>' +
                        '    </table>' +
                        '  </div>' +
                        '<div class="footer-div">' +
                        '  <button type="button" class="upload-btn0" id="testListAction">导入锁具信息</button>' +
                        '  <button type="button" class="upload-btn1" οnclick="closeUpload()">取消</button>' +
                        '</div>' +
                        '</div> ',
                    success: function () {
                        layui.use('upload', function () {
                            var $ = layui.jquery,
                                upload = layui.upload;
                            //多文件列表示例
                            var demoListView = $('#demoList'),
                                uploadListIns = upload.render({
                                    elem: '#testList',
                                    url: '/lockInfo/uploadExcel', //上传接口
                                    accept: 'file', //指定允许上传时校验的文件类型
                                    multiple: true, //是否允许多文件上传
                                    exts: 'xls|xlsx',
                                    auto: false, //是否选完文件后自动上传
                                    bindAction: '#testListAction', //指向一个按钮触发上传
                                    number: 10, //设置同时可上传的文件数量
                                    field: 'uploadExcel', //设定文件域的字段名
                                    choose: function (obj) {
                                        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 / 1024).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.files.file) { //上传成功
                                            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]; //删除文件队列已经上传成功的文件
                                            layer.close(opera);
                                        }
                                        this.error(index, upload);
                                    },
                                    error: function (index, upload) {
                                        var tr = demoListView.find('tr#upload-' + index),
                                            tds = tr.children();
                                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                                    }
                                });
                        })

                        // 关闭批量导入弹窗
                        window.closeUpload = function () {
                            layer.close(opera);     //执行关闭   
                        }

                    }
                });

在before中可以写方法 重新赋值
 ,before: function(obj){
                layer.load(); //上传loading
                this.data={'id':$("#id").val()};
            }

新增意外情况
 
如果桌面有某文件的快捷方式 ，快捷方式也属于图片，所以最根本的就是修改layui.all.js里的文字内容。
 
 
layui上传文件的upload.render中会出现所有的文件类型，但目前我只需要展示我需要上传的文件类型，如上传图片只展示所有的图片类型，视频就展示视频类型。
 
 
图片类型
 
layui.upload.render({
	acceptMime: 'image/*',
    ext: 'jpg|png|gif|bmp|jpeg',
});
 
 
视频类型
 
layui.upload.render({
	acceptMime: 'video/*',
    ext: 'mp4',
});