Layui ファイルのアップロード、プレビュー、変更方法
layui
<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>ログイン後にコピー
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();
});
}
});
});ログイン後にコピー
<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>
ログイン後にコピー
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 ファイルのアップロード、プレビュー、変更方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
4週間前
By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前
By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
4週間前
By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
1 か月前
By DDD
KB5055523を修正する方法Windows 11にインストールできませんか？
2週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7724
15
7724
15
Java チュートリアル
1643
14
1643
14
CakePHP チュートリアル
1396
52
1396
52
Laravel チュートリアル
1290
25
1290
25
PHP チュートリアル
1233
29
1233
29
Lauiuiログインページでジャンプを設定する方法
Apr 04, 2024 am 03:12 AM
Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。
Lauiuiでフォームデータを取得する方法
Apr 04, 2024 am 03:39 AM
layui は、フォームのすべてのフィールド データを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォーム データをシリアル化するなど、フォーム データを取得するためのさまざまなメソッドを提供します。これを AJAX リクエスト パラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。
Lauiui が自己適応を実現する方法
Apr 26, 2024 am 03:00 AM
アダプティブ レイアウトは、layui フレームワークのレスポンシブ レイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブ レイアウト コンテナを定義し、layui-container クラスを設定します。レスポンシブ ブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッド システム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。
lauiとvueの違いは何ですか？
Apr 04, 2024 am 03:54 AM
Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブ コンポーネントを提供します。Vue は、データ バインディング、コンポーネント開発、および状態管理に重点を置いたフルスタック フレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキル レベルに応じて、適切なフレームワークを選択できます。
Lauiuiでデータを転送する方法
Apr 26, 2024 am 03:39 AM
layui を使用してデータを送信する方法は次のとおりです。 Ajax を使用する: リクエスト オブジェクトを作成し、リクエスト パラメーター (URL、メソッド、データ) を設定し、レスポンスを処理します。組み込みメソッドを使用する: $.post、$.get、$.postJSON、$.getJSON などの組み込みメソッドを使用してデータ転送を簡素化します。
laui とはどういう意味ですか?
Apr 04, 2024 am 04:33 AM
layui は、開発者が最新の応答性の高いインタラクティブな Web アプリケーションを迅速に構築できるように、豊富な UI コンポーネント、ツール、機能を提供するフロントエンド UI フレームワークです。その機能には、柔軟で軽量、モジュール式の設計、豊富なコンポーネント、強力なツール、簡単な機能が含まれます。カスタマイズ。管理システム、電子商取引プラットフォーム、コンテンツ管理システム、ソーシャル ネットワーク、モバイル アプリケーションなど、さまざまな Web アプリケーションの開発に広く使用されています。
Lauiui フレームワークは何語ですか?
Apr 04, 2024 am 04:39 AM
layui フレームワークは、開発者が応答性の高い Web アプリケーションを迅速に構築できるようにする、使いやすい UI コンポーネントとツールのセットを提供する JavaScript ベースのフロントエンド フレームワークです。その機能には、モジュール式、軽量、応答性が高く、完全なドキュメントとコミュニティ サポートが含まれます。 layui は、管理バックエンド システム、電子商取引 Web サイト、モバイル アプリケーションの開発で広く使用されています。利点は迅速な起動、効率の向上、メンテナンスの容易さですが、欠点はカスタマイズの貧弱さと技術の更新の遅さです。
Lauiui フレームワークと Vue フレームワークの違い
Apr 26, 2024 am 01:27 AM
layui と vue はフロントエンド フレームワークであり、layui は UI コンポーネントとツールを提供する軽量ライブラリであり、vue は UI コンポーネント、状態管理、データ バインディング、ルーティングなどの機能を提供する包括的なフレームワークです。 layui はモジュール型アーキテクチャに基づいており、vue はコンポーネント化されたアーキテクチャに基づいています。 lauiui には小規模なエコシステムがあり、vue には大規模でアクティブなエコシステムがあります。 Lauiui の学習曲線は低く、vue の学習曲線は急です。 Layui は小規模なプロジェクトや UI コンポーネントの迅速な開発に適しており、vue は大規模なプロジェクトや豊富な機能を必要とするシナリオに適しています。
