mirror of
https://gitee.com/layui/layui.git
synced 2025-10-07 23:24:32 +08:00
2.8 KiB
2.8 KiB
单图片上传
![]()
')
});
},
done: function(res){
// 上传完毕
// …
}
});
});
多图片上传
<script>
layui.use(function(){
var upload = layui.upload;
var layer = layui.layer;
var element = layui.element;
var $ = layui.$;
// 单图片上传
var uploadInst = upload.render({
elem: '#ID-upload-demo-btn',
url: '', // 实际使用时改成您自己的上传接口即可。
before: function(obj){
// 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
});
element.progress('filter-demo', '0%'); // 进度条复位
layer.msg('上传中', {icon: 16, time: 0});
},
done: function(res){
// 若上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
// 上传成功的一些操作
// …
$('#ID-upload-demo-text').html(''); // 置空上传失败的状态
},
error: function(){
// 演示失败状态，并实现重传
var demoText = $('#ID-upload-demo-text');
demoText.html('上传失败 重试');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
},
// 进度条
progress: function(n, elem, e){
element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
if(n == 100){
layer.msg('上传完毕', {icon: 1});
}
}
});
// 多图片上传
upload.render({
elem: '#ID-upload-demo-btn-2',
url: '', // 实际使用时改成您自己的上传接口即可。
multiple: true,
before: function(obj){
// 预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#upload-demo-preview').append('预览图：
')
});
},
done: function(res){
// 上传完毕
// …
}
});
});