lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

更新 upload 用例

Browse Source
This commit is contained in:
贤心 2023-09-25 19:35:21 +08:00
parent 764b585c31
commit debfe48968
1 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
examples/upload.html
View File

@ -8,12 +8,11 @@
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
<style> <style>
body{padding: 50px 100px;}
.layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;} .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
hr{margin: 30px 0;} hr{margin: 32px 0;}
</style> </style>
</head> </head>
<body> <body class="layui-padding-5">
<div class="layui-upload"> <div class="layui-upload">
<button type="button" class="layui-btn" id="test1" name="123">上传图片</button> <button type="button" class="layui-btn" id="test1" name="123">上传图片</button>
@ -89,16 +88,20 @@ hr{margin: 30px 0;}
绑定原始文件域：<input type="file" name="file" id="test9"> 绑定原始文件域：<input type="file" name="file" id="test9">
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script> <script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<script> <script>
layui.use(['upload', 'element'], function(){ layui.use(['upload', 'element', 'form'], function(){
var $ = layui.$; var $ = layui.$;
var upload = layui.upload; var upload = layui.upload;
var element = layui.element; var element = layui.element;
// 模拟接口
var url = '' // 'https://httpbin.org/post';
// 创建实例
var uploadInst = upload.render({ var uploadInst = upload.render({
elem: '#test1', elem: '#test1',
url: '', url: url, // 若需模拟上传过程，而不真实上传文件，可使用开源的 HTTP 模拟接口: httpbin
// size: 2000, //限制文件大小，单位 KB // size: 2000, //限制文件大小，单位 KB
// accept: 'file', // accept: 'file',
method: 'get', method: 'get',
@ -149,19 +152,19 @@ layui.use(['upload', 'element'], function(){
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用 element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
} }
}); });
// 重置上述 upload 实例 // 重载上述实例
uploadInst.reload({ uploadInst.reload({
name:'avatar', field: 'avatar',
accept: 'images', // 只允许上传图片 accept: 'images', // 只允许上传图片
acceptMime: 'image/*', // 只筛选图片 acceptMime: 'image/*', // 只筛选图片
//,size: 2 // size: 2,
}); });
// 演示多图片上传 // 演示多图片上传
upload.render({ upload.render({
elem: '#test2', elem: '#test2',
url: '', url: url, // 实际使用时改成您自己的上传接口即可
multiple: true, // 多文件 multiple: true, // 多文件
unified: true, // 一起上传 --- 2.8.8+ unified: true, // 一起上传 --- 2.8.8+
accept: 'images', accept: 'images',
@ -188,7 +191,7 @@ layui.use(['upload', 'element'], function(){
var demoListView = $('#demoList'); var demoListView = $('#demoList');
var uploadListIns = upload.render({ var uploadListIns = upload.render({
elem: '#testList', elem: '#testList',
url: '', url: url, // 实际使用时改成您自己的上传接口即可
accept: 'file', accept: 'file',
multiple: true, multiple: true,
number: 5, number: 5,
@ -252,17 +255,16 @@ layui.use(['upload', 'element'], function(){
element.progress('progress-'+ index, n + '%'); //进度条 element.progress('progress-'+ index, n + '%'); //进度条
} }
}); });
upload.render({ upload.render({
elem: '.test333', elem: '.test333',
url: 'a', url: url,
accept: 'file', accept: 'file',
before: function(obj){ choose: function(obj){
console.log(this.item); console.log(this.elem);
}, },
done: function(res){ done: function(res){
console.log(res) console.log(res);
} }
}); });
@ -271,6 +273,7 @@ layui.use(['upload', 'element'], function(){
done: function(res, index, upload){ done: function(res, index, upload){
//获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增 //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
var item = this.item; var item = this.item;
} }
}) })
@ -286,7 +289,7 @@ layui.use(['upload', 'element'], function(){
upload.render({ upload.render({
elem: '#test4', elem: '#test4',
url: '', url: url, // 实际使用时改成您自己的上传接口即可
accept: 'video', accept: 'video',
done: function(res){ done: function(res){
console.log(res) console.log(res)
@ -306,7 +309,7 @@ layui.use(['upload', 'element'], function(){
//手动上传 //手动上传
upload.render({ upload.render({
elem: '#test6', elem: '#test6',
url: '', url: url, // 实际使用时改成您自己的上传接口即可
auto: false, auto: false,
// multiple: true, // multiple: true,
bindAction: '#test7', bindAction: '#test7',
@ -328,7 +331,7 @@ layui.use(['upload', 'element'], function(){
upload.render({ upload.render({
elem: '#test8', elem: '#test8',
url: '', url: url, // 实际使用时改成您自己的上传接口即可
done: function(res){ done: function(res){
console.log(res); console.log(res);
} }
@ -336,7 +339,7 @@ layui.use(['upload', 'element'], function(){
upload.render({ upload.render({
elem: '#test9', elem: '#test9',
url: '', url: url, // 实际使用时改成您自己的上传接口即可
done: function(res){ done: function(res){
console.log(res); console.log(res);
} }