Browse Source

更新 upload 测试代码

pull/1292/head
贤心 1 year ago
parent
commit
fbb83b52fd
  1. 182
      examples/upload.html

182
examples/upload.html

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

Loading…
Cancel
Save