layui批量上传文件，修改页面删除，审核页面展示

一、添加页面上传上传


效果图

HTML代码：

<div class="layui-row">
                <div class="layui-col-xs8 layui-col-xs-offset2">
                    <div class="layui-form-item">
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div id="uploadImg" class="layui-upload">
                                <button type="button" class="layui-btn" id="upload">
                                    <i class="layui-icon">&#xe67c;</i>上传单位材料<span style="color: red;font-size: 20px;">*</span>
                                </button>
                                <div class="layui-upload-list">
                                    <table class="layui-table" style="text-align: center;">
                                        <thead>
                                        <tr>
                                            <th style="text-align: center;">文件预览</th>
                                            <th style="text-align: center;">大小</th>
                                            <th style="text-align: center;">要件材料名称</th>
                                            <th style="text-align: center;">状态</th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="imgList"></tbody>
                                    </table>
                                </div>
<!--                                <button type="button" class="layui-btn" id="startUpload">开始上传</button>-->
                                <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传六个文件</div>
                            </div>

                            <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required">
                        </blockquote>

                    </div>
                </div>
            </div>

form表单隐藏域

<form class="form-horizontal" onsubmit="return false" id="yaojian">
        <input type="hidden" name="companyindexId1" id="companyindexId1">
        <!--                                要件材料名称-->
        <input type="hidden" name="essentialMaterialsName" id="essentialMaterialsName">
        <!--                                文件保存路径-->
        <input type="hidden" name="imgUrl" id="imgUrl">
    </form>

js:

var count = 0;
        layui.use(['table', 'form', 'element', 'upload'], function () {
            var table = layui.table;
            var form = layui.form;
            var element = layui.element;
            var $ = layui.jquery;
            var upload = layui.upload;

            //多文件列表示例
            var demoListView = $('#imgList');
            var totalArray = new Array();
            var uploadInst = upload.render({
                elem: '#upload' //绑定元素
                , url: urlRootPrefix + '/files' //上传接口
                , accept: 'file'  // 允许上传的文件类型
                // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式，多个用逗号隔开),
                , size: 20480        // 最大允许上传的文件大小  单位 KB
                , auto: false //选择文件后不自动上传
                , bindAction: '#save' //指向一个按钮触发上传
                , multiple: true   // 开启多文件上传
                , number: 6    //  同时上传文件的最大个数
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    var arr = Object.keys(files);
                    totalArray = totalArray.concat(arr);
                    // 检查上传文件的个数
                    if (totalArray.length <= 6) {
                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            if(count == 0){
                                autoPrimaryId();
                            }
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 66px;width:100px;"></td>'
                                , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                                , '<td>' + file.name +'</td>'
                                , '<td>等待保存</td>'
                                , '<td>'
                                , '<button class="layui-btn demo-reload layui-hide">重传</button>'
                                , '<button class="layui-btn 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);
                        });
                    } else {
                        // 超出上传最大文件
                        layer.msg("上传文件最大不超过6个")
                    }

                }
                , done: function (res, index, upload) {
                    console.log("res", res);
                    console.log("index",index);
                    $("#imgUrl").val(res.data.url);
                    $("#essentialMaterialsName").val(res.data.name);
                    if (res.code == 200) { //上传成功
                        $('#yaojian').bootstrapValidator();
                        var bootstrapValidator = $("#yaojian").data('bootstrapValidator');
                        bootstrapValidator.validate();
                        if(!bootstrapValidator.isValid()){
                            return;
                        }
                        var formdata1 = $("#yaojian").serializeObject();
                        alert("formdata:"+JSON.stringify(formdata1))
                        //formdata.status = cstatus; //审核模式时放开该注释
                        $.ajax({
                            type : 'post',
                            url : urlRootPrefix + '/tbEssentialMaterialss',
                            contentType: "application/json; charset=utf-8",
                            data : JSON.stringify(formdata1),
                            success : function(data) {
                            }
                        });
                        var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                        tds.eq(4).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(5).html(''); //清空操作
                        $("#imgUrl").val(null);
                        $("#essentialMaterialsName").val(null);
                        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(4).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(5).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        });
              //一对多的关系，所以要先生成一的主键
        function autoPrimaryId(){
            count = 1;
            $.ajax({
                type : 'get',
                url : urlRootPrefix + '/tbBuildunitRegs/autoPrimaryId',
                success : function(data) {
                    console.log("data:" + JSON.stringify(data));
                    debugger
                    $("#companyId").val(data.data);
                    $("#companyindexId1").val(data.data);
                }
            });
        }

二、修改页面删除：emmm有点小bug，因为在子框架里，删除后自动加载页面的话会返回到父页面。。。。


修改页面删除图①

预览中图片

html代码：

<div class="layui-row">
                <div class="layui-col-xs8 layui-col-xs-offset2">
                    <div class="layui-form-item">
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div id="uploadImg" class="layui-upload">
                                <button type="button" class="layui-btn" id="upload">
                                    <i class="layui-icon">&#xe67c;</i>上传单位材料<span style="color: red;font-size: 20px;">*</span>
                                </button>
                                <div class="layui-upload-list">
                                    <table class="layui-table" style="text-align: center;">
                                        <thead>
                                        <tr>
                                            <th hidden>主键</th><!--这个并没有用到，emmmm-->
                                            <th style="text-align: center;">要件材料名称</th>
                                            <th style="text-align: center;">状态</th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="imgList"></tbody>
                                    </table>
                                </div>
                                <!--                                <button type="button" class="layui-btn" id="startUpload">开始上传</button>-->
                                <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传六个文件,在当前页面上传的文件暂不支持预览，请保存后再预览！</div>
                            </div>
                        </blockquote>

                    </div>
                </div>
            </div>

form表单隐藏域

<form class="form-horizontal" onsubmit="return false" id="yaojian">
        <input type="hidden" name="companyindexId1" id="companyindexId1">
        <!--                                要件材料名称-->
        <input type="hidden" name="essentialMaterialsName" id="essentialMaterialsName">
        <!--                                文件保存路径-->
        <input type="hidden" name="imgUrl" id="imgUrl">
    </form>

js代码

var demoListView = $('#imgList');
//在initData中添加下面这行代码
loopYaoJianList(data.tbEssentialMaterialsList);
function loopYaoJianList(obj) {
            var tbody = document.getElementById("imgList");
            for (let i = 0; i < obj.length; i++) {
                var row = document.createElement('tr');
                var idCell = document.createElement('td');//感觉这个并没有什么卵用~~~~~~后面都没用到
                idCell.hidden = true;
                var nameCell = document.createElement('td');
                var statusCell = document.createElement('td');
                var caoZuoCell = document.createElement('td');
                idCell.innerHTML = obj[i].essentialkeyId;
                nameCell.innerHTML = obj[i].essentialMaterialsName;
                statusCell.innerHTML = "保存";
                caoZuoCell.innerHTML = '<button class="layui-btn demo-reload layui-hide">修改</button><button onclick="del(\'' +obj[i].essentialkeyId + '\' )" class="layui-btn layui-btn-danger demo-delete">删除</button>';
                caoZuoCell.innerHTML = caoZuoCell.innerHTML + '<button class="layui-btn" title="预览文件" onclick="showFiles(\''+ urlRootPrefix + "/statics" +  obj[i].imgUrl + '\')"><i class="layui-icon">&#xe61d;</i></button>'
                row.appendChild(idCell);
                row.appendChild(nameCell);
                row.appendChild(statusCell);
                row.appendChild(caoZuoCell);
                tbody.appendChild(row);
            }

        }
layui.use(['table', 'form', 'element', 'upload'], function () {
            var table = layui.table;
            var form = layui.form;
            var element = layui.element;
            var $ = layui.jquery;
            var upload = layui.upload;
            //多文件列表示例
            var totalArray = new Array();
            var uploadInst = upload.render({
                elem: '#upload' //绑定元素
                , url: urlRootPrefix + '/files' //上传接口
                , accept: 'file'  // 允许上传的文件类型
                // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式，多个用逗号隔开),
                , size: 20480        // 最大允许上传的文件大小  单位 KB
                , auto: false //选择文件后不自动上传
                , bindAction: '#save' //指向一个按钮触发上传
                , multiple: true   // 开启多文件上传
                , number: 6    //  同时上传文件的最大个数
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    var arr = Object.keys(files);
                    totalArray = totalArray.concat(arr);
                    // 检查上传文件的个数
                    if (totalArray.length <= 6) {
                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td>' + file.name +'</td>'
                                , '<td>等待保存</td>'
                                , '<td>'
                                , '<button class="layui-btn demo-reload layui-hide">重传</button>'
                                , '<button class="layui-btn 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);
                        });
                    } else {
                        // 超出上传最大文件
                        layer.msg("上传文件最大不超过6个")
                    }

                }
                , done: function (res, index, upload) {
                    $("#companyindexId1").val($("#companyId").val());
                    $("#imgUrl").val(res.data.url);
                    $("#essentialMaterialsName").val(res.data.name);
                    if (res.code == 200) { //上传成功
                        $('#yaojian').bootstrapValidator();
                        var bootstrapValidator = $("#yaojian").data('bootstrapValidator');
                        bootstrapValidator.validate();
                        if(!bootstrapValidator.isValid()){
                            return;
                        }

                        var formdata1 = $("#yaojian").serializeObject();
                        alert("formdata:"+JSON.stringify(formdata1))
                        //formdata.status = cstatus; //审核模式时放开该注释
                        $.ajax({
                            type : 'post',
                            url : urlRootPrefix + '/tbEssentialMaterialss',
                            contentType: "application/json; charset=utf-8",
                            data : JSON.stringify(formdata1),
                            success : function(data) {

                            }
                        });

                        var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                        tds.eq(1).html('<span style="color: #5FB878;">上传成功</span>');
                        // tds.eq(5).html(''); //清空操作
                        $("#imgUrl").val(null);
                        $("#essentialMaterialsName").val(null);
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                        if(this.files.length == 0){
                            update();
                        }
                    }

                    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 showFiles(url) {
            debugger
            layer.open({
                type : 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
                shade : 0.1, //遮罩层透明度
                area : [ '700px', '550px' ], //弹出层宽高
                title : '详情与文件',//弹出层标题
                content : url
                //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        }

        function del(id){
            layer.confirm('确定要删除吗？', {
                btn : [ '确定', '取消' ]
            }, function() {
                $.ajax({
                    type : 'delete',
                    url : '/tbEssentialMaterialss/'+id,
                    success : function(data) {
                        document.location.reload();//这一行是错的，emmmm
                        layer.msg("删除成功");
                    }
                });

                layer.close(1);
            });
        }

三、审核页面展示（只有查看权限）


进入页面

展示

html代码：

<div class="layui-row">
                <div class="layui-col-xs8 layui-col-xs-offset2">
                    <div class="layui-form-item">
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            <div id="uploadImg" class="layui-upload">
                                <div class="layui-upload-list">
                                    <table class="layui-table" style="text-align: center;">
                                        <thead>
                                        <tr>
                                            <th hidden>主键</th>
                                            <th style="text-align: center;">要件材料名称</th>
                                            <th style="text-align: center;">状态</th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="imgList"></tbody>
                                    </table>
                                </div>
                            </div>
                        </blockquote>

                    </div>
                </div>
            </div>

js代码：

//在initData中添加下面这一行
loopYaoJianList(data.tbEssentialMaterialsList);
function loopYaoJianList(obj) {
            var tbody = document.getElementById("imgList");
            for (let i = 0; i < obj.length; i++) {
                var row = document.createElement('tr');
                var idCell = document.createElement('td');
                idCell.hidden = true;
                var nameCell = document.createElement('td');
                var statusCell = document.createElement('td');
                var caoZuoCell = document.createElement('td');
                idCell.innerHTML = obj[i].essentialkeyId;
                nameCell.innerHTML = obj[i].essentialMaterialsName;
                statusCell.innerHTML = "保存";
                caoZuoCell.innerHTML = '<button class="layui-btn" title="预览文件" onclick="showFiles(\''+ urlRootPrefix + "/statics" +  obj[i].imgUrl + '\')"><i class="layui-icon">&#xe61d;</i></button>'
                row.appendChild(idCell);
                row.appendChild(nameCell);
                row.appendChild(statusCell);
                row.appendChild(caoZuoCell);
                tbody.appendChild(row);
            }

        }
    function showFiles(url) {
            debugger
            layer.open({
                type : 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
                shade : 0.1, //遮罩层透明度
                area : [ '700px', '550px' ], //弹出层宽高
                title : '详情与文件',//弹出层标题
                content : url
                //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 解决IE8下上传文件问题，无需flash，无需html5
    解决IE8下上传文件问题 场景：实现上传文件功能，重写上传按钮样式，并需要得到后台返回的数据来动态修改页面。 要求...
    小牛不屈阅读 1,429评论 0赞 0
  • 「查缺补漏」送你18道浏览器面试题
    前言 想要成为一名合格的前端工程师，掌握相关浏览器的工作原理是必备的，这样子才会有一个完整知识体系，要是「能参透浏...
    不行了快拦住我阅读 1,651评论 0赞 2
  • 面试题
    session与cookie的区别和联系1.存放位置：Session保存在服务器，Cookie保存在客户端。2.存...
    _fhs阅读 916评论 0赞 1
  • 纯js实现上传文件小工具
    在前端开发工作中，上传文件是一个很常见的功能，尤其是后台管理方面的项目，经常需要用到。而目前单页面应用（SPA）框...
    _乾_阅读 32,852评论 20赞 37
  • 家长会谈合作
    久违的晴天，家长会。 家长大会开好到教室时，离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,575评论 16赞 22