单文件上传
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) { //预读本地文件示例，不支持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) { //演示失败状态，并实现重传 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;">图片预览</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;">温馨提示: 每次最多上传六张图片, 单张图片的大小不超过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' //指向一个按钮触发上传 , 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><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 值，以免删除后出现同名文件不可选 }); 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>联系方式<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;">图片预览</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" 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) { //演示失败状态，并实现重传 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' //指向一个按钮触发上传 , 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><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 值，以免删除后出现同名文件不可选 }); 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>联系方式</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;">图片预览</th> <th style="text-align: center;">状态</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">确认保存</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) { //演示失败状态，并实现重传 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' //指向一个按钮触发上传 , multiple: true // 开启多文件上传 , number: 6 // 同时上传文件的最大个数 , choose: function (obj) { var files = this.files = obj.pushfile(); //将每次选择的文件追加到文件队列 var totalarray = object.keys(files); // 检查上传文件的个数 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 值，以免删除后出现同名文件不可选 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'); //显示重传 } }); // 监听修改客服二维码事件 $(#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) { //演示失败状态，并实现重传 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); // 修改全局可上传文件的总个数 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>
更多layui知识请关注layui使用教程栏目。
以上就是layui文件上传、预览及修改方法的详细内容。