單文件上傳

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">&#xe67c;</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) {                 //預讀本地文件示例，不支持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">&#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;">狀態(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]; //刪除對應的文件                             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]; //刪除文件隊列已經上傳成功的文件                  }                 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>詳細地址<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>&#xe67c;</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>&#xe67c;</i>上傳商鋪圖片<span style="color: red;font-size: 20px;">*</span>                         </button>                         <div>                             <table style="text-align: center;">                                 <thead>                                 <tr>                                     <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" 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">確認保存</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) {                 //預讀本地文件示例，不支持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]; //刪除對應的文件                             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]; //刪除文件隊列已經上傳成功的文件                  }                 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 // 默認三秒                         }, function () { // 關閉回調，關閉層刷新頁面                             var index = parent.layer.getFrameIndex(window.name);  // 先得到當前iframe層的索引                             parent.layer.close(index);                         });                     } else {                         layer.msg(response["msg"], {                             icon: 1,                             time: 1500 // 1.5秒，默認三秒                         });                     }                     return false;                 },                 error: function (response) {                     layer.msg(response["msg"], {                         icon: 1,                         time: 1500 // 1.5秒，默認三秒                     });                 }             });              return false; // 關閉表單提交         });     }); </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>詳細地址</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>&#xe67c;</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;">圖片預覽</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>&#xe67c;</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">確認保存</button>                 </div>             </div>         </div>     </form> </div>  <script src="{{static_url('layui/layui.js')}}" charset="utf-8"></script> <!-- 注意：如果你直接復制所有代碼到本地，上述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) {                 //預讀本地文件示例，不支持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]; //刪除對應的文件                             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]; //刪除文件隊列已經上傳成功的文件                 }                 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) {                     //預讀本地文件示例，不支持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();             // 更新表格中當前行后面每一行的序號             // 找到當前行后面的每一行             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));                 }             });             // 找到當前行,刪除             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秒，默認三秒                         }, function () { // 關閉回調，關閉層刷新頁面                             var index = parent.layer.getFrameIndex(window.name);  // 先得到當前iframe層的索引                             parent.layer.close(index);                         });                     } else {                         layer.msg(response["msg"], {                             icon: 1,                             time: 1500 // 1.5秒，默認三秒                         });                     }                      return false;                 },                 error: function (response) {                     layer.msg(response["msg"], {                         icon: 1,                         time: 1500 // 1.5秒，默認三秒                     });                     return false;                 }             });              return false; // 關閉表單提交(注意：此處不能省略，此處不能省略，此處不能省略。。。 否則頁面刷新有問題)         });     });   </script> </body> </html>