<html>
<head>
<meta charset='UTF-8'>
<meta name='Author' content='wanghua'>
<title>Test upload with Layui2</title>
<link rel='stylesheet' href='/assets/layui2/css/layui.css'/>
<style>
.thumb {margin-left:5px; margin-top:15px; height:128px}
#prevModal {width:100%; height:100%; text-align:center; display:none;}
#img_prev {max-width:98%; max-height:98%; margin: 10px auto}
</style>
</head>
<body>
<div class='layui-container' style='margin-top:15px'>
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>选择图片
</button>
<div class='layui-input-block' id='div_prev' title=''></div>
</div>
<div id='prevModal'>
<img id='img_prev'/>
</div>
<script type='text/javascript' src='/assets/layui2/layui.js'></script>
<script type='text/javascript'>
layui.use(['upload','layer'], function(){
var upload = layui.upload, layer = layui.layer, $ = layui.jquery;
var uploadInst = upload.render({
elem: '#test1', //绑定元素
accept: 'images', //允许上传的文件类型
multiple: true, //允许多文件上传
auto: false, //选完文件后不要自动上传
bindAction: '#upd', //指定一个按钮触发上传
url: '/upload/', //上传接口
choose: function(obj){
var files = obj.pushFile(); //将每次选择的文件追加到文件队列
//图像预览,如果是多文件,会逐个添加。(不支持ie8/9)
obj.preview(function(index, file, result){
var imgobj = new Image(); //创建新img对象
imgobj.src = result; //指定数据源
imgobj.className = 'thumb';
imgobj.onclick = function(result) {
//单击预览
img_prev.src = this.src;
var w = $(window).width() - 42, h = $(window).height() - 42;
layer.open({
title: '预览',
type: 1,
area: [w, h], //宽高
content: $('#prevModal')
});
};
document.getElementById("div_prev").appendChild(imgobj); //添加到预览区域
});
},
done: function(res){
//上传完毕回调
},
error: function(){
//请求异常回调
}
});
});
</script>
要点小结:
1)layui upload组件的熟练程度,在这里重点就是 choose 回调以及各必要参数的配置;
2)实时创建 img 对象并添加到预览区域;
3)对实时创建的img对象的单击事件处理绑定。
其它:
upload组件提供了已选择文件列表对象,因此,如果要更进一步,单击大图预览,还可以使用 layer.photos() 做个临时相册预览。但这里为了简明,直接用的是 layer.open。
如果看完对你有所帮助,那就打赏博主吧 哈哈哈哈~~~~