github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

更新 upload 测试代码

pull/1292/head
贤心 2023-06-20 10:35:12 +08:00
parent 582f55089e
commit fbb83b52fd
1 changed files with 91 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
examples/upload.html
View File

@ -97,23 +97,23 @@ layui.use(['upload', 'element'], function(){
var element = layui.element; var element = layui.element;
var uploadInst = upload.render({ var uploadInst = upload.render({
elem: '#test1' elem: '#test1',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
//,size: 2000 //限制文件大小，单位 KB // size: 2000, //限制文件大小，单位 KB
//,accept: 'file' // accept: 'file',
,method: 'get' method: 'get',
,fileAccept: 'image/*' fileAccept: 'image/*',
,exts: 'jpg|png|gif|bmp|jpeg|pdf' exts: 'jpg|png|gif|bmp|jpeg|pdf',
,data: { //额外参数 data: { // 额外参数
a: 1 a: 1,
,b: function(){ b: function(){
return 2 return 2
} }
} },
,choose: function(obj){ choose: function(obj){
console.log('choose', obj); console.log('choose', obj);
} },
,before: function(obj){ before: function(obj){
//预读本地文件示例，不支持ie8 //预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64） $('#demo1').attr('src', result); //图片链接（base64）
@ -122,8 +122,8 @@ layui.use(['upload', 'element'], function(){
return; return;
layer.msg('不允许上传') layer.msg('不允许上传')
return false; return false;
} },
,done: function(res, index){ done: function(res, index){
//如果上传失败 //如果上传失败
if(res.code > 0){ if(res.code > 0){
@ -131,8 +131,8 @@ layui.use(['upload', 'element'], function(){
} }
//上传成功 //上传成功
console.log(res, index); console.log(res, index);
} },
,error: function(index, upload){ error: function(index, upload){
this.item.html('重选上传'); this.item.html('重选上传');
//演示失败状态，并实现重传 //演示失败状态，并实现重传
@ -143,8 +143,8 @@ layui.use(['upload', 'element'], function(){
}); });
element.progress('demo', '0%'); element.progress('demo', '0%');
} },
,progress: function(n, elem, res, index){ progress: function(n, elem, res, index){
console.log(n + '%', elem, res, index); //获取进度百分比 console.log(n + '%', elem, res, index); //获取进度百分比
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用 element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
} }
@ -152,34 +152,34 @@ layui.use(['upload', 'element'], function(){
// 重置上述 upload 实例 // 重置上述 upload 实例
uploadInst.reload({ uploadInst.reload({
name:'avatar' name:'avatar',
,accept: 'images' //只允许上传图片 accept: 'images', // 只允许上传图片
,acceptMime: 'image/*' //只筛选图片 acceptMime: 'image/*', // 只筛选图片
//,size: 2 //,size: 2
}); });
// 演示多图片上传 // 演示多图片上传
upload.render({ upload.render({
elem: '#test2' elem: '#test2',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
,multiple: true // 多文件 multiple: true, // 多文件
,unified: true // 一起上传 --- 2.8.8+ unified: true, // 一起上传 --- 2.8.8+
,accept: 'images' accept: 'images',
,number: 3 //同时上传的数量 number: 3, // 同时上传的数量
,size: 1024 size: 1024,
,before: function(obj){ before: function(obj){
// 预读本地文件示例，不支持ie8 // 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">') $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
}); });
// this.files = obj.pushFile(); // this.files = obj.pushFile();
} },
,done: function(res, index){ done: function(res, index){
// 上传完毕 // 上传完毕
console.log(res, index) console.log(res, index)
} },
,allDone: function(obj){ allDone: function(obj){
console.log(obj) console.log(obj)
} }
}); });
@ -187,15 +187,15 @@ layui.use(['upload', 'element'], function(){
// 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况 // 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况
var demoListView = $('#demoList'); var demoListView = $('#demoList');
var uploadListIns = upload.render({ var uploadListIns = upload.render({
elem: '#testList' elem: '#testList',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
,accept: 'file' accept: 'file',
,multiple: true multiple: true,
,number: 3 number: 3,
,auto: false auto: false,
,bindAction: '#testListAction' bindAction: '#testListAction',
,size: 30 size: 30,
,choose: function(obj){ choose: function(obj){
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列 var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
//读取本地文件 //读取本地文件
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
@ -227,8 +227,8 @@ layui.use(['upload', 'element'], function(){
element.render('progress'); element.render('progress');
}); });
} },
,done: function(res, index, upload){ done: function(res, index, upload){
//if(res.code == 0){ //上传成功 //if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index) var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children(); ,tds = tr.children();
@ -237,16 +237,16 @@ layui.use(['upload', 'element'], function(){
return; return;
//} //}
this.error(index, upload); this.error(index, upload);
} },
,allDone: function(obj){ allDone: function(obj){
console.log(obj) console.log(obj)
} },
,error: function(index, upload){ error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index) var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children(); ,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
} },
,progress: function(n, elem, e, index){ progress: function(n, elem, e, index){
console.log(n); console.log(n);
console.log(index); console.log(index);
element.progress('progress-'+ index, n + '%'); //进度条 element.progress('progress-'+ index, n + '%'); //进度条
@ -255,20 +255,20 @@ layui.use(['upload', 'element'], function(){
upload.render({ upload.render({
elem: '.test333' elem: '.test333',
,url: 'a' url: 'a',
,accept: 'file' accept: 'file',
,before: function(obj){ before: function(obj){
console.log(this.item); console.log(this.item);
} },
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
}); });
upload.render({ upload.render({
elem: '.testm' elem: '.testm',
,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;
} }
@ -276,28 +276,28 @@ layui.use(['upload', 'element'], function(){
/* /*
upload.render({ upload.render({
elem: '#test33' elem: '#test33',
,url: '' url: '',
,accept: 'file' accept: 'file',
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
});*/ });*/
upload.render({ upload.render({
elem: '#test4' elem: '#test4',
,url: '' url: '',
,accept: 'video' accept: 'video',
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
}); });
upload.render({ upload.render({
elem: '#test5' elem: '#test5',
,url: '' url: '',
,accept: 'audio' accept: 'audio',
,done: function(res){ done: function(res){
console.log(res) console.log(res)
} }
}); });
@ -305,39 +305,39 @@ layui.use(['upload', 'element'], function(){
//手动上传 //手动上传
upload.render({ upload.render({
elem: '#test6' elem: '#test6',
,url: '' url: '',
,auto: false auto: false,
//,multiple: true // multiple: true,
,bindAction: '#test7' bindAction: '#test7',
,choose: function(obj){ choose: function(obj){
var that = this; var that = this;
obj.preview(function(index, file){ obj.preview(function(index, file){
that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>'); that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>');
console.log(file.name); console.log(file.name);
//obj.resetFile(index, file, '123.jpg'); //obj.resetFile(index, file, '123.jpg');
}); });
} },
,before: function(){ before: function(){
console.log(345); console.log(345);
} },
,done: function(res){ done: function(res){
console.log(res); console.log(res);
} }
}); });
upload.render({ upload.render({
elem: '#test8' elem: '#test8',
,url: 'https://httpbin.org/post' url: 'https://httpbin.org/post',
,done: function(res){ done: function(res){
console.log(res); console.log(res);
} }
}); });
upload.render({ upload.render({
elem: '#test9' elem: '#test9',
,url: '' url: '',
,done: function(res){ done: function(res){
console.log(res); console.log(res);
} }
}); });