단일 파일 업로드 h1, HTML
<blockquote> <div> <button> <i></i>上传客服二维码<span>*</span> </button> <div> <img class="layui-upload-img lazy" src="/static/imghwm/default1.png" data-src="" alt="Layui 파일 업로드, 미리보기 및 수정 방법" > </div> <div> <button>开始上传</button> </div> <div>温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div> </div> <input> </blockquote>E
2, JS 파트
Rreeee다중 사진 업로드
1, HTML
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>上传成功</span>');
} else {
this.error(index, upload);
}
}
, error: function (index, upload) {
//演示失败状态，并实现重传
var startDiv = $('#startDiv');
startDiv.html('<span>上传失败</span> <a>重试</a>');
startDiv.find('.demo-reload').on('click', function () {
uploadSingle.upload();
});
}
});
});E2, JS 파트
R<blockquote> <div> <button> <i></i>上传商铺图片<span>*</span> </button> <div> <table> <thead> <tr> <th>图片预览</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> </div> <button>开始上传</button> <div>温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1, 推荐上传图片长675px,宽450px </div> </div> <input> </blockquote>E
페이지 추가
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 '
, '<td><img class="layui-upload-img lazy" src="/static/imghwm/default1.png" data-src="' + result + '" alt="Layui 파일 업로드, 미리보기 및 수정 방법" ></td>'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
, '<td>等待上传</td>'
, '<td>'
, '<button>重传</button>'
, '<button>删除</button>'
, '</td>'
, ''].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>上传成功</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>上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
페이지 편집
Rnbsp;html>
<meta>
<title>添加商铺</title>
<meta>
<meta>
<meta>
<link>
<div>
<form>
<div>
<div>
<div>
<label>商铺名称<span>*</span></label>
<div>
<input>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<label>商铺编号</label>
<div>
<input>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<label>详细地址<span>*</span></label>
<div>
<input>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<label>联系方式<span>*</span></label>
<div>
<input>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<blockquote>
<div>
<button>
<i></i>上传客服二维码<span>*</span>
</button>
<div>
<img src="/static/imghwm/default1.png" data-src="" class="lazy" alt="Layui 파일 업로드, 미리보기 및 수정 방법" >
</div>
<div>
<button>开始上传</button>
</div>
<div>温馨提示: 每次最多上传一张图片, 单张图片的大小不超过2MB</div>
</div>
<input>
</blockquote>
</div>
</div>
</div>
<div>
<div>
<div>
<blockquote>
<div>
<button>
<i></i>上传商铺图片<span>*</span>
</button>
<div>
<table>
<thead>
<tr>
<th>图片预览</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<button>开始上传</button>
<div>温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB, 长宽比例推荐1.5:1,
推荐上传图片长675px,宽450px
</div>
</div>
<input>
</blockquote>
</div>
</div>
</div>
<div>
<div>
<div>
<button>确认保存</button>
</div>
</div>
</div>
</form>
</div>
<script></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;">上传成功');
} else {
this.error(index, upload);
}
}
, error: function (index, upload) {
//演示失败状态，并实现重传
var startDiv = $('#startDiv');
startDiv.html('<span style="color: #FF5722;">上传失败 <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重试');
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="/static/imghwm/default1.png" data-src="' + result + '" class="lazy" alt="' + file.name + '" style="max-width:90%">'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb'
, '<td>等待上传'
, '<td>'
, '<button class="layui-btn demo-reload layui-hide">重传'
, '<button class="layui-btn layui-btn-danger demo-delete">删除'
, ''
, ''].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;">上传成功');
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;">上传失败');
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>
EE 레이유에 대해 더 알아보기 지식이 있으신 분들은
layui 사용법 튜토리얼칼럼을 주목해주세요.
위 내용은 Layui 파일 업로드, 미리보기 및 수정 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명
이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
2023最新layui视频教程推荐（建议收藏）Jul 19, 2021 pm 05:22 PM以下为大家整理了前端UI框架 — layui的视频教程，不需要从迅雷、百度云之类的第三方网盘平台下载，全部在线免费观看。教程由浅入深，有前端基础的人就能学习，从安装到案例讲解，全面详细，帮助你更快更好的掌握layui框架！
如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架，提供了简洁美观的界面组件和丰富的交互体验。在开发中，我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先，我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代
如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见，通过展示用户上传的图片，让用户能够方便地浏览和管理图片。为了提供更好的用户体验，一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能，同时提供具体的代码示例。首先，确保您已经引入Layui框架的CSS和JS文件。您
如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM如何利用Layui实现图片拖拽和缩放效果在现代网页设计中，图片的交互效果成为增加网页活力和用户体验的重要手段。其中，图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果，并提供具体的代码示例。一、引入Layui框架和相关依赖：首先，我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入
如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM如何利用Layui实现图片轮播图功能现如今，图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼，吸引用户的眼球，提升用户体验。在本文中，我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先，我们需要在HTML页面中引入Layui的核心文件和样式文件：<linkrel="stylesheet"h
如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM如何使用Layui开发一个支持文件上传和下载的资源管理系统引言：随着互联网的发展，数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理，还是个人的文件存储，都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架，具有简洁明了的设计以及丰富的组件库，非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文
如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM如何利用Layui实现图片反色和亮度调节功能引言：在前端开发中，经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能，并提供具体代码实例供参考。一、Layui简介：Layui是一款优秀的前端UI框架，具有简洁、美观、易用等特点。它提供了丰富的前端组件，让开发者能够轻松搭建出精美的网站。二、准备工作：在开始之前，我
如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM如何使用Layui框架开发一个支持实时通讯的在线客服系统概述：在线客服系统是现代企业提供与客户交流的重要渠道之一，而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统，并提供具体的代码示例。一、准备工作安装Node.js：在开发环境中安装Node.js，并配置好相关环境。安装Layui：在项目中引入Lay
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
1 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다
1 몇 주 전ByDDD
뜨거운 도구
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
뜨거운 주제
Cakephp 튜토리얼137152
1371
52Win11 활성화 키 영구3619
3619