关于layui多文件上传(此处以上传图片为例)

不多说直接贴出代码和大家分享

html代码块

     <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代码块

 //多文件列表
    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 = $(['+ index + '">'
                    , '' + file.name + ''
                    , '' + (file.size / 1014).toFixed(1) + 'kb'
                    , '等待上传'
                    , ''
                    ,''
                    , ''
                    , ''
                    , ''].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('上传成功');
                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('上传失败');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    })

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

代码中已有很详细的注释,如有不明白的请留言。

你可能感兴趣的:(前端技术)