About layui multiple file uploads (here to upload pictures, for example)

Copyright: for them to learn together, prohibiting plagiarism! ! ! https://blog.csdn.net/qq_38036909/article/details/83988496

Not much to say directly posted the code to share

html code block

     <div class="layui-upload">
                <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>
                <button onclick="noFile()" type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>

js code block

 //多文件列表
    var demoListView = $('#demoList')
    var uploadListIns = upload.render({
        elem: '#testList'
        , url: parent.getApiUrl('system/bus-img/uplodFileBackstage')
        , headers: {'Authorization': token}
        //设置图片上传的大小
        , size: 31457280
        //设置图片上传的格式
        , acceptMime: 'image/jpg, image/png'
        , multiple: true
        //禁用自动上传
        , auto: false
        //上传按钮
        , bindAction: '#testListAction'
        //请求前的操作
        , before: function () {
            //添加参数
            var data = {}
            data.busId = compId;
            this.data = data;
        }
        //请求结束操作
        , allDone: function (obj) {
            //获取上传成功的图片个数
            uploadsize = obj.successful;
            //显示已经上传的图片个数
            showImg();
            //提示上传成功
            layer.alert("上传成功")
        }
        //每一次请求结束后操作
        , choose: function (obj) {
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
                imgIndex = imgIndex + 1
                var len = 5-pendingPicturesNum
                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(''));
                if (imgIndex > len){
                    layer.msg("最多可展示"+len+"张")
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    return;
                }
                //单个重传
                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 值，以免删除后出现同名文件不可选
                    imgIndex = imgIndex - 1
                });

                demoListView.append(tr);
            });
        }
        , done: function (res, index, upload) {
            if (res.respCode == 200) { //上传成功
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html(''); //清空操作
                $("#demoList").html('');
                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }
            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'); //显示重传
        }
    })

});
function noFile() {
    var content = $("#demoList").html();
    if (content== null || content == 0) {
        layer.alert("请选择文件")
    }
}

Code has very detailed notes, if not understand, please leave a message.