layui多文件一次性上传案例

废话不多直接开始

	<div class="layui-upload" style="">
            <button type="button" class="layui-btn layui-btn-normal" 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>

            <br/>
            <br/>
            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
      </div>

layui只需要把每次点击的文件放进变量里就好了，不需要layui来上传。因为他是循环多次调接口

var files;
layui.use('upload', function () {
     
    var $ = layui.jquery
        , upload = layui.upload;
    //多文件列表示例
    var demoListView = $('#demoList')
        , uploadListIns = upload.render({
     
        elem: '#testList'
        , accept: 'file'
        , multiple: true
        , auto: false
        , bindAction: '#testListAction'
        , choose: function (obj) {
     
            files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
     
                var tr = $(['+ index + '">'
                    , '' + file.name + ''
                    , '' + (file.size / 1024).toFixed(1) + 'kb'
                    , '等待上传'
                    , ''
                    , '重传'
                    , '删除'
                    , ''
                    , ''].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);
            });
        }
    });
});

然后files里面就是很多文件了，咱们用自定义的fromdata用ajax给他一次性送上去

$("#testListAction").on("click", function () {
     
    var form = new FormData();
    for (let i in files) {
     
        form.append("files", files[i]);
    }
    form.append("devEstateId", fileToken);
    form.append("tm",new Date().getTime());
    var index = layer.load(0, {
     shade: false}); //0代表加载的风格，支持0-2
    $.ajax({
     
        url: httpurl + '/estate/devUpload',
        type: "post",
        dataType: "json",
        async: false,
        contentType: false,
        processData: false,
        data: form,
        success: function (result) {
     
            if (result.code == 200) {
     
                layer.msg("上传成功！", {
     icon: 6});
                fileToken = null;
                ifclose();
            } else if (result.code == 500) {
     
                layer.msg(result.msg, {
     icon: 5});
            }
        }
    })
});

后台直接用对应的名字接收就好了

  public Object devUpload(@RequestParam("files") MultipartFile[] files, String devEstateId, HttpServletRequest request) {
     

ok完事