基于layUI的图片上传前预览功能的2种实现方式

layui.use(‘upload‘, function(){
...
choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){　　　　　　　
var imgSrc = result;　　　//result得到图像的base64编码
　　　　 var tr = $(`
　　　　　　　　　　${file.name} //点击文件名的时候执行See()这个函数
　　　　　　　　　　${(file.size/1014).toFixed(1)} kb
　　　　　　　　　　等待上传
　　　　　　　　　　重传
　　　　　　　　　　　　删除
　　　　　　　　　　 `.trim());
　　}，
...
}); //layui结束

See = function(index){　　//这的index是上文中的result的值
　　layer.open({　　　　　//layUI的弹出层，详见官网
　　　　type: 1, 　　　　 // 1：页面层 0：信息框
　　　　title: ‘预览‘,
　　　　area: [‘50%‘,‘50%‘], //layer的宽高
　　　　shade: 0, //遮罩
　　　　zIndex: layer.zIndex, //层叠顺序
　　　　btn: [‘关闭‘],
　　　　btn1: function(){ //按钮的回调
　　　　　　layer.closeAll();
　　　　},
　　　　maxmin: true, //最大最小化，默认false, 只对type:1 和 type:2 有效
　　　　content: ``,　　//content是弹窗显示的内容，这路用的es6的模板字符串写法，变量用${index}表示
　　　　success: function(layero){
　　　　　　layer.setTop(layero); // setTop() 置顶当前窗口
　　　　}
　　})

}；