浅谈layui文件上传、预览及修改

单文件上传

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部分

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">&#xe67c;</i>上传商铺图片
    <span style="color: red;font-size: 20px;">*</span>
</button>
<div class="layui-upload-list">
    <table class="layui-table" style="text-align: center;">
        <thead>
        <tr>
            <th style="text-align: center;">图片预览</th>
            <th style="text-align: center;">大小</th>
            <th style="text-align: center;">状态</th>
            <th style="text-align: center;">操作</th>
        </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();
 
  //清空 input file 值,以免删除后出现同名文件不可选
 uploadListIns.config.elem.next()[0].value = '';
});
 
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>&#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;">状态</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();

//清空 input file 值,以免删除后出现同名文件不可选
uploadListIns.config.elem.next()[0].value = '';
});
 
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>&#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;">状态</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) {
//演示失败状态,并实现重传
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();

//清空 input file 值,以免删除后出现同名文件不可选
uploadInst.config.elem.next()[0].value = ''; 

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表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstraptable、layuitable、ea

浅谈layui上传文件和数据表格中的一些问题

layui是一款我比较喜欢的框架,它的界面风格和颜色搭配都是让人比较舒服的,所以我非常喜欢使用layui。接下来就是在工作中使用layui遇到了一些比较细节的问题:第一:layui上传文件的问题,第二

浅谈让 layui table 固定列也能监听滚动的方法

目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列

layui登录后token问题详解

layui是一个非常简单且实用的后台管理系统搭建框架,里面的插件丰富使用简单,只需要在原有基础上进行修改即可,但是在数据处理方面略显薄弱,内置的jquery在实际过程中略显不足,若是能添加内置的mvc

layui时间控件清空之后无法正常使用怎么办?

解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。共有两种解决方式:方式一(layui1.x):html代码: js代码:varstart={ istime:tru

layui中的layer怎么进行宽高设置?

layui中的layer模块可以使用area设置宽高。类型:String/Array,默认:'auto'在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area:'500px',

layui之弹出form表单以及提交

第一步:引用两个文件第二步:点击删除按钮弹出提示框/*删除开始*/ $(".del").click(function(){ varid=$(this).attr("id"); layer.alert(

layui如何支持 es5 写法?方法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui中怎么设置select下拉框自动选中某项?

1、需求场景分析用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。2、Layui的select

layui框架之如何导出表格全部数据?

2020.1.16最近终于又用到了导出表格,我在实际项目里使用了上次发现的导出全部数据方法,然后遇到了一些问题,并进行了解决,终于可以正式写在博客中了。整体代码: //导出表格配置 table.r

layui兼不兼容ie8?

layui兼不兼容ie8?layui兼容ie8,layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui(谐音:类UI)是一款采用自身模块规范

layui表格中怎么显示图片?

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了1、jsp代码 发布Banner 2、然后是js代码layui.use('table',function()

layui同页面如何显示多种时间样式?

Layui时间模块同页面显示多种时间样式layui时间模块主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器等五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。代码如下:

layui是基于vue的吗?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui是啥框架?

layui首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面

layui如何抓取表单数据?

注意事项:1、layui中提交按钮是基于“监听”机制实现的。2、form.on()的调用需置于layui.use的回调函数中。3、末尾的'returnfalse'不可或缺,以确保不会触发页面刷新。注意

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

怎么将layui引入开发框架中?

将layui导入开发框架的方法:1、下载框架包(http://www.layui.com/)2、将layui文件夹拷入项目位置3、页面中导入layui.all.jslayui.css和jquery即可