站長資訊網(wǎng)
單文件上傳
1、HTML
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div id="uploadQRcode" class="layui-upload"> <button type="button" class="layui-btn" id="uploadQR"> <i class="layui-icon"></i>上傳客服二維碼<span style="color: red;font-size: 20px;">*</span> </button> <div class="layui-upload-list"> <img id="qrshow" src="" alt="" class="layui-upload-img" style="height: 100px;width:100px;border:1px solid black;"> </div> <div id="startDiv"> <button type="button" class="layui-btn" id="startUploadQR">開始上傳</button> </div> <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳一張圖片, 單張圖片的大小不超過2MB</div> </div> <input type="text" name="cli_qrcode" id="qrInput" style="display: none;" lay-verify="required"> </blockquote>
2、js部分
layui.use(['form', 'element', 'upload'], function () { var form = layui.form; var element = layui.element; var $ = layui.jquery; var upload = layui.upload; //單文件示例 選完文件后不自動上傳 var uploadSingle = upload.render({ elem: '#uploadQR' , url: '/web/api/upload/upload?option=4' , accept: 'images' // 允許上傳的文件類型 , size: 2048 // 最大允許上傳的文件大小 單位 KB , auto: false , bindAction: '#startUploadQR' , choose: function (obj) { //預(yù)讀本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#qrshow').attr('src', result); //圖片鏈接（base64） }); } , done: function (res, index, upload) { if (res.code == 0) { //上傳成功 $("#qrInput").val(res.data[0].fp_relative); var startDiv = $('#startDiv'); startDiv.html('<span style="color: #5FB878;">上傳成功</span>'); } else { this.error(index, upload); } } , error: function (index, upload) { //演示失敗狀態(tài)，并實現(xiàn)重傳 var startDiv = $('#startDiv'); startDiv.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>'); startDiv.find('.demo-reload').on('click', function () { uploadSingle.upload(); }); } }); });
多圖片的上傳
1、HTML
<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"></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;">狀態(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;">溫馨提示: 每次最多上傳六張圖片, 單張圖片的大小不超過5MB, 長寬比例推薦1.5:1, 推薦上傳圖片長675px,寬450px </div> </div> <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required"> </blockquote>
2、js部分
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: '/web/api/upload/upload?option=3' //上傳接口 , accept: 'images' // 允許上傳的文件類型 // , acceptMime: 'image/jpg,image/png' // (只支持jpg和png格式，多個用逗號隔開), , size: 5120 // 最大允許上傳的文件大小 單位 KB , auto: false //選擇文件后不自動上傳 , bindAction: '#startUpload' //指向一個按鈕觸發(fā)上傳 , multiple: true // 開啟多文件上傳 , number: 6 // 同時上傳文件的最大個數(shù) , choose: function (obj) { var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列 var arr = Object.keys(files); totalArray = totalArray.concat(arr); // 檢查上傳文件的個數(shù) if (totalArray.length <= 6) { //讀取本地文件 obj.preview(function (index, file, result) { 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>等待上傳</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]; //刪除對應(yīng)的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選 }); demoListView.append(tr); }); } else { // 超出上傳最大文件 layer.msg("上傳文件最大不超過6個") } } , done: function (res, index, upload) { console.log("res", res); if (res.code == 0) { //上傳成功 // 上傳成功后將圖片路徑拼接到input中，多個路徑用","分割 var inputVal = document.getElementById("imgInput").value; var valData = ""; if (inputVal) { valData = inputVal + "," + res.data[0].fp_relative; } else { valData = res.data[0].fp_relative; } document.getElementById("imgInput").value = valData; var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //刪除文件隊列已經(jīng)上傳成功的文件 } 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'); //顯示重傳 } }); });
添加頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加商鋪</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="{{static_url('layui/css/layui.css')}}" media="all"> </head> <body> <div style="margin-top: 30px;"> <form class="layui-form layui-form-pane"> <div> <div class="layui-col-xs8 layui-col-xs-offset2"> <div> <label>商鋪名稱<span style="color: red;font-size: 20px;">*</span></label> <div> <input type="text" lay-verify="required" name="name" autocomplete="off"> </div> </div> </div> </div> <div> <div class="layui-col-xs8 layui-col-xs-offset2"> <div> <label>商鋪編號</label> <div> <input type="text" name="code" autocomplete="off"> </div> </div> </div> </div> <div> <div class="layui-col-xs8 layui-col-xs-offset2"> <div> <label>詳細(xì)地址<span style="color: red;font-size: 20px;">*</span></label> <div> <input type="text" name="address" required lay-verify="required" autocomplete="off" class="layui-input"> </div> </div> </div> </div> <div> <div class="layui-col-xs8 layui-col-xs-offset2"> <div> <label>聯(lián)系方式<span style="color: red;font-size: 20px;">*</span></label> <div> <input type="text" name="contact" required lay-verify="required|phone" autocomplete="off" class="layui-input"> </div> </div> </div> </div> <div> <div class="layui-col-xs8 layui-col-xs-offset2"> <div> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div id="uploadQRcode"> <button type="button" id="uploadQR"> <i></i>上傳客服二維碼<span style="color: red;font-size: 20px;">*</span> </button> <div> <img id="qrshow" src="" alt="" style="height: 100px;width:100px;border:1px solid black;"> </div> <div id="startDiv"> <button type="button" id="startUploadQR">開始上傳</button> </div> <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳一張圖片, 單張圖片的大小不超過2MB</div> </div> <input type="text" name="cli_qrcode" id="qrInput" style="display: none;" lay-verify="required"> </blockquote> </div> </div> </div> <div> <div class="layui-col-xs8 layui-col-xs-offset2"> <div> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div id="uploadImg"> <button type="button" id="upload"> <i></i>上傳商鋪圖片<span style="color: red;font-size: 20px;">*</span> </button> <div> <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;">狀態(tài)</th> <th style="text-align: center;">操作</th> </tr> </thead> <tbody id="imgList"></tbody> </table> </div> <button type="button" id="startUpload">開始上傳</button> <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳六張圖片, 單張圖片的大小不超過5MB, 長寬比例推薦1.5:1, 推薦上傳圖片長675px,寬450px </div> </div> <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required"> </blockquote> </div> </div> </div> <div> <div class="layui-col-xs8 layui-col-xs-offset2" style="margin-top: 30px;"> <div> <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="addObject">確認(rèn)保存</button> </div> </div> </div> </form> </div> <script src="{{static_url('layui/layui.js')}}" charset="utf-8"></script> <script> 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 uploadSingle = upload.render({ elem: '#uploadQR' , url: '/web/api/upload/upload?option=4' , accept: 'images' // 允許上傳的文件類型 , size: 2048 // 最大允許上傳的文件大小 單位 KB , auto: false , bindAction: '#startUploadQR' , choose: function (obj) { //預(yù)讀本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#qrshow').attr('src', result); //圖片鏈接（base64） }); } , done: function (res, index, upload) { if (res.code == 0) { //上傳成功 $("#qrInput").val(res.data[0].fp_relative); var startDiv = $('#startDiv'); startDiv.html('<span style="color: #5FB878;">上傳成功</span>'); } else { this.error(index, upload); } } , error: function (index, upload) { //演示失敗狀態(tài)，并實現(xiàn)重傳 var startDiv = $('#startDiv'); startDiv.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>'); startDiv.find('.demo-reload').on('click', function () { uploadSingle.upload(); }); } }); //多文件列表示例 var demoListView = $('#imgList'); var totalArray = new Array(); var uploadInst = upload.render({ elem: '#upload' //綁定元素 , url: '/web/api/upload/upload?option=3' //上傳接口 , accept: 'images' // 允許上傳的文件類型 // , acceptMime: 'image/jpg,image/png' // (只支持jpg和png格式，多個用逗號隔開), , size: 5120 // 最大允許上傳的文件大小 單位 KB , auto: false //選擇文件后不自動上傳 , bindAction: '#startUpload' //指向一個按鈕觸發(fā)上傳 , multiple: true // 開啟多文件上傳 , number: 6 // 同時上傳文件的最大個數(shù) , choose: function (obj) { var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列 var arr = Object.keys(files); totalArray = totalArray.concat(arr); // 檢查上傳文件的個數(shù) if (totalArray.length <= 6) { //讀取本地文件 obj.preview(function (index, file, result) { var tr = $(['<tr id="upload-' + index + '">' , '<td><img src="' + result + '" alt="' + file.name + '" style="height: 66px;width:100px;"></td>' , '<td>' + (file.size / 1014).toFixed(1) + 'kb</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]; //刪除對應(yīng)的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選 }); demoListView.append(tr); }); } else { // 超出上傳最大文件 layer.msg("上傳文件最大不超過6個") } } , done: function (res, index, upload) { console.log("res", res); if (res.code == 0) { //上傳成功 // 上傳成功后將圖片路徑拼接到input中，多個路徑用","分割 var inputVal = document.getElementById("imgInput").value; var valData = ""; if (inputVal) { valData = inputVal + "," + res.data[0].fp_relative; } else { valData = res.data[0].fp_relative; } document.getElementById("imgInput").value = valData; var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //刪除文件隊列已經(jīng)上傳成功的文件 } 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'); //顯示重傳 } }); form.on("submit(addObject)", function (data) { $.ajax({ url: "/web/api/seller/add", type: "post", data: data.field, dataType: "json", success: function (response) { if (response["code"] == 0) { layer.msg("添加成功", { icon: 1, time: 2500 // 默認(rèn)三秒 }, function () { // 關(guān)閉回調(diào)，關(guān)閉層刷新頁面 var index = parent.layer.getFrameIndex(window.name); // 先得到當(dāng)前iframe層的索引 parent.layer.close(index); }); } else { layer.msg(response["msg"], { icon: 1, time: 1500 // 1.5秒，默認(rèn)三秒 }); } return false; }, error: function (response) { layer.msg(response["msg"], { icon: 1, time: 1500 // 1.5秒，默認(rèn)三秒 }); } }); return false; // 關(guān)閉表單提交 }); }); </script> </body> </html>
編輯頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>編輯商鋪</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="{{static_url('layui/css/layui.css')}}" media="all"> </head> <body> <div style="margin-top: 30px;"> <form class="layui-form layui-form-pane" lay-filter="updateForm"> <input type="text" name="seller_id" lay-verify="required" style="display: none;"> <div> <div class="layui-col-xs10 layui-col-xs-offset1"> <div> <label>商鋪名稱</label> <div> <input type="text" lay-verify="required" name="name" autocomplete="off"> </div> </div> </div> </div> <div> <div class="layui-col-xs10 layui-col-xs-offset1"> <div> <label>商鋪編號</label> <div> <input type="text" name="code" autocomplete="off"> </div> </div> </div> </div> <div> <div class="layui-col-xs10 layui-col-xs-offset1"> <div> <label>詳細(xì)地址</label> <div> <input type="text" name="address" required lay-verify="required" autocomplete="off" class="layui-input"> </div> </div> </div> </div> <div> <div class="layui-col-xs10 layui-col-xs-offset1"> <div> <label>聯(lián)系方式</label> <div> <input type="text" name="contact" required lay-verify="required|phone" autocomplete="off" class="layui-input"> </div> </div> </div> </div> <div> <div class="layui-col-xs10 layui-col-xs-offset1"> <div> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div id="uploadQRcode"> <div> <img id="qrshow" src="" alt="" style="height: 100px;width:100px;border:1px solid black;"> </div> <div> <div> <button type="button" class="layui-btn layui-btn-sm" id="uploadQR"> <i></i>修改客服二維碼 </button> </div> <div id="startDiv"> <button type="button" class="layui-btn layui-hide layui-btn-sm" id="startUploadQR" style="margin-left: 30px;">開始上傳 </button> </div> </div> <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳一張圖片, 單張圖片的大小不超過2MB</div> </div> <input type="text" name="old_cli_qrcode" style="display: none;"> <input type="text" name="cli_qrcode" id="qrInput" lay-verify="required" style="display: none;"> </blockquote> </div> </div> </div> <div> <div class="layui-col-xs10 layui-col-xs-offset1"> <div> <div id="uploadImg"> <div> <table style="text-align: center;"> <thead> <tr> <th style="text-align: center;">圖片預(yù)覽</th> <th style="text-align: center;">狀態(tài)</th> <th style="text-align: center;">操作</th> </tr> </thead> <tbody id="imgList"></tbody> </table> </div> <div> <div> <button type="button" class="layui-btn layui-btn-sm" id="upload"> <i></i>添加商鋪圖片 </button> </div> <div class="layui-col-xs3 layui-col-xs-offset5"> <button type="button" class="layui-btn layui-btn-fluid layui-btn-sm" id="startUpload"> 開始上傳 </button> </div> </div> <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳六張圖片, 單張圖片的大小不超過5MB, 長寬比例推薦1.5:1, 推薦上傳圖片長675px,寬450px </div> </div> <input type="text" name="old_face_img" style="display: none;"> <input type="text" name="face_img" id="imgInput" lay-verify="required" style="display: none;"> </div> </div> </div> <div> <div class="layui-col-xs10 layui-col-xs-offset1" style="margin-top: 30px;"> <div> <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="addObject">確認(rèn)保存</button> </div> </div> </div> </form> </div> <script src="{{static_url('layui/layui.js')}}" charset="utf-8"></script> <!-- 注意：如果你直接復(fù)制所有代碼到本地，上述js路徑需要改成你本地的 --> <script> layui.use(['form', 'element', 'jquery', 'upload'], function () { var form = layui.form; var element = layui.element; var $ = layui.jquery; var upload = layui.upload; //單文件示例 選完文件后不自動上傳 var uploadSingle = upload.render({ elem: '#uploadQR' , url: '/web/api/upload/upload?option=4' , accept: 'images' // 允許上傳的文件類型 , size: 2048 // 最大允許上傳的文件大小 單位 KB , auto: false , bindAction: '#startUploadQR' , choose: function (obj) { //預(yù)讀本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#qrshow').attr('src', result); //圖片鏈接（base64） }); } , done: function (res, index, upload) { if (res.code == 0) { //上傳成功 $("#qrInput").val(res.data[0].fp_relative); $("#uploadQR").addClass("layui-hide"); var startDiv = $('#startDiv'); startDiv.html('<span style="color: #5FB878;font-size: 17px;">修改成功</span>'); } else { this.error(index, upload); } } , error: function (index, upload) { //演示失敗狀態(tài)，并實現(xiàn)重傳 var startDiv = $('#startDiv'); startDiv.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>'); startDiv.find('.demo-reload').on('click', function () { uploadSingle.upload(); }); } }); //多文件列表示例 var demoListView = $('#imgList'); var totalArray = new Array(); var uploadInst = upload.render({ elem: '#upload' //綁定元素 , url: '/web/api/upload/upload?option=3' //上傳接口 , accept: 'images' // 允許上傳的文件類型 // , acceptMime: 'image/jpg,image/png' // (只支持jpg和png格式，多個用逗號隔開), , size: 5120 // 最大允許上傳的文件大小 單位 KB , auto: false //選擇文件后不自動上傳 , bindAction: '#startUpload' //指向一個按鈕觸發(fā)上傳 , multiple: true // 開啟多文件上傳 , number: 6 // 同時上傳文件的最大個數(shù) , choose: function (obj) { var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列 var totalArray = Object.keys(files); // 檢查上傳文件的個數(shù) if (totalArray.length < (7 - demoListView.data("choiceTotal"))) { //讀取本地文件 obj.preview(function (index, file, result) { var tr = $(['<tr id="upload-' + index + '">' , '<td><img src="' + result + '" alt="' + file.name + '" style="height: 66px;width:100px;"></td>' , '<td>等待上傳</td>' , '<td>' , '<button class="layui-btn layui-btn-sm demo-reload layui-hide">重傳</button>' , '<button class="layui-btn layui-btn-sm 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]; //刪除對應(yīng)的文件 tr.remove(); uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選 totalArray.splice(totalArray.indexOf(index), 1); }); demoListView.append(tr); }); } else { // 超出上傳最大文件 layer.msg("上傳文件最大不超過6個"); totalArray.pop(); } } , done: function (res, index, upload) { if (res.code == 0) { //上傳成功 // 上傳成功后將圖片路徑拼接到input中，多個路徑用","分割 var inputVal = document.getElementById("imgInput").value; var valData = ""; if (inputVal) { valData = inputVal + "," + res.data[0].fp_relative; } else { valData = res.data[0].fp_relative; } document.getElementById("imgInput").value = valData; var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(1).html('<span style="color: #5FB878;">上傳成功</span>'); tds.eq(2).html(''); //清空操作 return delete this.files[index]; //刪除文件隊列已經(jīng)上傳成功的文件 } this.error(index, upload); } , error: function (index, upload) { var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(1).html('<span style="color: #FF5722;">上傳失敗</span>'); tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //顯示重傳 } }); // 監(jiān)聽修改客服二維碼事件 $("#uploadQR").on("click", function () { $("#startUploadQR").removeClass('layui-hide'); }); // 處理圖片的修改 demoListView.on('click', '.edit-btn', function () { var csid = $(this).attr("csid"); var startid = $(this).attr("startid"); var currentIndex = parseInt(csid.split("_")[1]); var $currentTr = $(this).parent().parent(); $(this).addClass("layui-hide"); $("#" + csid).removeClass("layui-hide"); $("#" + startid).removeClass("layui-hide"); var uploadEdit = upload.render({ elem: '#' + csid , url: '/web/api/upload/upload?option=3' , accept: 'images' // 允許上傳的文件類型 , size: 2048 // 最大允許上傳的文件大小 單位 KB , auto: false , bindAction: '#' + startid , choose: function (obj) { //預(yù)讀本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $currentTr.children().eq(0).html('<img src="' + result + '" alt="" style="height: 66px;width:100px;">') //圖片鏈接（base64） }); } , done: function (res, index, upload) { if (res.code == 0) { //上傳成功 var InputTag = $("#imgInput"); var oldInputStrList = InputTag.val().split(","); oldInputStrList[currentIndex] = res.data[0].fp_relative; var newInputStr = oldInputStrList.join(","); InputTag.val(newInputStr); $currentTr.children().eq(1).text("修改成功"); $currentTr.children().eq(2).html(""); } else { this.error(index, upload); } } , error: function (index, upload) { //演示失敗狀態(tài)，并實現(xiàn)重傳 var fileHtml = '<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>'; $currentTr.children().eq(2).html(fileHtml); $currentTr.find('.demo-reload').on('click', function () { uploadEdit.upload(); }); } }); }); // 處理圖片的刪除 demoListView.on("click", '.delete-btn', function () { var delid = this.id; var currentDelIndex = parseInt(delid.split("_")[1]); var theCurrentTr = $(this).parent().parent(); // 更新表格中當(dāng)前行后面每一行的序號 // 找到當(dāng)前行后面的每一行 theCurrentTr.nextAll().each(function () { // each中的this和外面的this不一樣了! var oldCsid = $(this).children().eq(2).find(".edit-btn").attr("csid"); var oldStarid = $(this).children().eq(2).find(".edit-btn").attr("startid"); var oldChoiceid = $(this).children().eq(2).find(".choice-btn").attr("id"); var oldUploadid = $(this).children().eq(2).find(".upload-btn").attr("id"); var oldDelid = $(this).children().eq(2).find(".delete-btn").attr("id"); if (oldDelid && oldCsid) { $(this).children().eq(2).find(".edit-btn").attr("csid", oldCsid.split("_")[0] + "_" + (oldCsid.split("_")[1] - 1)); $(this).children().eq(2).find(".edit-btn").attr("startid", oldStarid.split("_")[0] + "_" + (oldStarid.split("_")[1] - 1)); $(this).children().eq(2).find(".choice-btn").attr("id", oldChoiceid.split("_")[0] + "_" + (oldChoiceid.split("_")[1] - 1)); $(this).children().eq(2).find(".upload-btn").attr("id", oldUploadid.split("_")[0] + "_" + (oldUploadid.split("_")[1] - 1)); $(this).children().eq(2).find(".delete-btn").attr("id", oldDelid.split("_")[0] + "_" + (oldDelid.split("_")[1] - 1)); } }); // 找到當(dāng)前行,刪除 theCurrentTr.remove(); // 修改新的input框中的值 var delInputTag = $("#imgInput"); var oldDelInputStrList = delInputTag.val().split(","); oldDelInputStrList.splice(currentDelIndex, 1); var delnewInputStr = oldDelInputStrList.join(","); delInputTag.val(delnewInputStr); // 修改全局可上傳文件的總個數(shù) var $currentTotal = demoListView.data("choiceTotal"); demoListView.data("choiceTotal", $currentTotal - 1); }); // 填充管理員詳情 $.ajax({ url: "/web/api/seller/detail?seller_id={{seller_id}}", type: "get", dataType: "json", success: function (response) { console.log(response); $("#qrshow").attr("src", response.data.qrcode_url); var faceList = response.data.face_url_list; demoListView.data("choiceTotal", faceList.length); if (faceList) { for (var i = 0; i < faceList.length; i++) { var trEle = document.createElement("tr"); var trHtml = '<td><img src="' + faceList[i] + '" alt="" style="height: 66px;width:100px;"></td>' + '<td>等待修改</td><td><button type="button" class="layui-btn layui-btn-sm edit-btn" csid="choice_' + i + '" startid="startUpload_' + i + '">修改</button><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-hide choice-btn" id="choice_' + i + '" style="margin-right: 10px;">選擇圖片</button><button type="button" class="layui-btn layui-btn-sm layui-hide upload-btn" id="startUpload_' + i + '">上傳</button>' + '<button type="button" class="layui-btn layui-btn-sm delete-btn" id="delete_' + i + '">刪除</button></td>'; trEle.innerHTML = trHtml; $("#imgList").append(trEle); } } form.val("updateForm", { "seller_id": response.data.id, "name": response.data.name, "code": response.data.code, "address": response.data.address, "contact": response.data.contact, "cli_qrcode": response.data.cli_qrcode, "old_cli_qrcode": response.data.cli_qrcode, "face_img": response.data.face_img, "old_face_img": response.data.face_img }); form.render(); } }); // 綁定提交事件 form.on("submit(addObject)", function (data) { $.ajax({ url: "/web/api/seller/update", type: "post", data: data.field, dataType: "json", success: function (response) { if (response["code"] == 0) { layer.msg("更新成功", { icon: 1, time: 1500 // 1.5秒，默認(rèn)三秒 }, function () { // 關(guān)閉回調(diào)，關(guān)閉層刷新頁面 var index = parent.layer.getFrameIndex(window.name); // 先得到當(dāng)前iframe層的索引 parent.layer.close(index); }); } else { layer.msg(response["msg"], { icon: 1, time: 1500 // 1.5秒，默認(rèn)三秒 }); } return false; }, error: function (response) { layer.msg(response["msg"], { icon: 1, time: 1500 // 1.5秒，默認(rèn)三秒 }); return false; } }); return false; // 關(guān)閉表單提交(注意：此處不能省略，此處不能省略，此處不能省略。。。 否則頁面刷新有問題) }); }); </script> </body> </html>
