layui批量上傳文件，修改頁(yè)面刪除，審核頁(yè)面展示

一、添加頁(yè)面上傳上傳


效果圖

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;">文件預(yù)覽</th>
                                            <th style="text-align: center;">大小</th>
                                            <th style="text-align: center;">要件材料名稱</th>
                                            <th style="text-align: center;">狀態(tài)</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;">溫馨提示: 每次最多上傳六個(gè)文件</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格式，多個(gè)用逗號(hào)隔開),
                , size: 20480        // 最大允許上傳的文件大小  單位 KB
                , auto: false //選擇文件后不自動(dòng)上傳
                , bindAction: '#save' //指向一個(gè)按鈕觸發(fā)上傳
                , multiple: true   // 開啟多文件上傳
                , number: 6    //  同時(shí)上傳文件的最大個(gè)數(shù)
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊(duì)列
                    var arr = Object.keys(files);
                    totalArray = totalArray.concat(arr);
                    // 檢查上傳文件的個(gè)數(shù)
                    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(''));

                            //單個(gè)重傳
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });
                            //刪除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //刪除對(duì)應(yīng)的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選
                            });

                            demoListView.append(tr);
                        });
                    } else {
                        // 超出上傳最大文件
                        layer.msg("上傳文件最大不超過6個(gè)")
                    }

                }
                , 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; //審核模式時(shí)放開該注釋
                        $.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]; //刪除文件隊(duì)列已經(jīng)上傳成功的文件
                    }
                    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'); //顯示重傳
                }
            });
        });
              //一對(duì)多的關(guān)系，所以要先生成一的主鍵
        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);
                }
            });
        }

二、修改頁(yè)面刪除：emmm有點(diǎn)小bug，因?yàn)樵谧涌蚣芾?，刪除后自動(dòng)加載頁(yè)面的話會(huì)返回到父頁(yè)面。。。。


修改頁(yè)面刪除圖①

預(yù)覽中圖片

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><!--這個(gè)并沒有用到，emmmm-->
                                            <th style="text-align: center;">要件材料名稱</th>
                                            <th style="text-align: center;">狀態(tài)</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;">溫馨提示: 每次最多上傳六個(gè)文件,在當(dāng)前頁(yè)面上傳的文件暫不支持預(yù)覽，請(qǐng)保存后再預(yù)覽！</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');//感覺這個(gè)并沒有什么卵用~~~~~~后面都沒用到
                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="預(yù)覽文件" 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格式，多個(gè)用逗號(hào)隔開),
                , size: 20480        // 最大允許上傳的文件大小  單位 KB
                , auto: false //選擇文件后不自動(dòng)上傳
                , bindAction: '#save' //指向一個(gè)按鈕觸發(fā)上傳
                , multiple: true   // 開啟多文件上傳
                , number: 6    //  同時(shí)上傳文件的最大個(gè)數(shù)
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊(duì)列
                    var arr = Object.keys(files);
                    totalArray = totalArray.concat(arr);
                    // 檢查上傳文件的個(gè)數(shù)
                    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(''));

                            //單個(gè)重傳
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });

                            //刪除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //刪除對(duì)應(yīng)的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選
                            });

                            demoListView.append(tr);
                        });
                    } else {
                        // 超出上傳最大文件
                        layer.msg("上傳文件最大不超過6個(gè)")
                    }

                }
                , 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; //審核模式時(shí)放開該注釋
                        $.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]; //刪除文件隊(duì)列已經(jīng)上傳成功的文件
                        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種層類型?？蓚魅氲闹涤校?（信息框，默認(rèn)）1（頁(yè)面層）2（iframe層）3（加載層）4（tips層）,
                shade : 0.1, //遮罩層透明度
                area : [ '700px', '550px' ], //彈出層寬高
                title : '詳情與文件',//彈出層標(biāo)題
                content : url
                //這里content是一個(gè)URL，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['http://sentsin.com', 'no']
            });
        }

        function del(id){
            layer.confirm('確定要?jiǎng)h除嗎？', {
                btn : [ '確定', '取消' ]
            }, function() {
                $.ajax({
                    type : 'delete',
                    url : '/tbEssentialMaterialss/'+id,
                    success : function(data) {
                        document.location.reload();//這一行是錯(cuò)的，emmmm
                        layer.msg("刪除成功");
                    }
                });

                layer.close(1);
            });
        }

三、審核頁(yè)面展示（只有查看權(quán)限）


進(jìn)入頁(yè)面

展示

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;">狀態(tài)</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="預(yù)覽文件" 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（信息框，默認(rèn)）1（頁(yè)面層）2（iframe層）3（加載層）4（tips層）,
                shade : 0.1, //遮罩層透明度
                area : [ '700px', '550px' ], //彈出層寬高
                title : '詳情與文件',//彈出層標(biāo)題
                content : url
                //這里content是一個(gè)URL，如果你不想讓iframe出現(xiàn)滾動(dòng)條，你還可以content: ['http://sentsin.com', 'no']
            });
        }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 解決IE8下上傳文件問題 場(chǎng)景：實(shí)現(xiàn)上傳文件功能，重寫上傳按鈕樣式，并需要得到后臺(tái)返回的數(shù)據(jù)來(lái)動(dòng)態(tài)修改頁(yè)面。 要求...
    小牛不屈閱讀 1,609評(píng)論 0贊 0
  • 前言 想要成為一名合格的前端工程師，掌握相關(guān)瀏覽器的工作原理是必備的，這樣子才會(huì)有一個(gè)完整知識(shí)體系，要是「能參透瀏...
    不行了快攔住我閱讀 1,735評(píng)論 0贊 2
  • session與cookie的區(qū)別和聯(lián)系1.存放位置：Session保存在服務(wù)器，Cookie保存在客戶端。2.存...
    _fhs閱讀 968評(píng)論 0贊 1
  • 在前端開發(fā)工作中，上傳文件是一個(gè)很常見的功能，尤其是后臺(tái)管理方面的項(xiàng)目，經(jīng)常需要用到。而目前單頁(yè)面應(yīng)用（SPA）框...
    _乾_閱讀 33,041評(píng)論 20贊 37
  • 久違的晴天，家長(zhǎng)會(huì)。 家長(zhǎng)大會(huì)開好到教室時(shí)，離放學(xué)已經(jīng)沒多少時(shí)間了。班主任說(shuō)已經(jīng)安排了三個(gè)家長(zhǎng)分享經(jīng)驗(yàn)。 放學(xué)鈴聲...
    飄雪兒5閱讀 7,805評(píng)論 16贊 22

友情鏈接更多精彩內(nèi)容