#### layui 预览图片 ```javascript function previewImg(obj) { var img = new Image(); img.src = obj.src; var height = img.height + 50; //获取图片高度 var width = img.width; //获取图片宽度 var imgHtml = "<img src='" + obj.src + "' />"; //弹出层 layer.open({ type: 1, shade: 0.8, offset: 'auto', area: [width + 'px',height+'px'], shadeClose:true,//点击外围关闭弹窗 scrollbar: false,//不现实滚动条 title: "图片预览", //不显示标题 content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响 cancel: function () { //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 }); } }); } ``` #### 上传多图 ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="test2">上传商品轮播图</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%"> 预览图： <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"> </div> </blockquote> </div> ``` ```javascript // 上传多图 upload.render({ elem: '#test2' ,url: '{:url("sys.uploads/uploads")}' ,data: { type: 'image', path: 'goods' } ,done: function(res){ if(res.code>0){ //上传成功 console.log(res) $('.uploader-list').append( '<div id="" class="file-iteme">' + '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' + '<img style="width: 180px;height: 120px;" src="'+res.url+'" alt="">' + '</div>' ); } } }); // 鼠标悬停显示删除 $(document).on("mouseenter mouseleave", ".file-iteme", function(event){ if(event.type === "mouseenter"){ //鼠标悬浮 $(this).children(".info").fadeIn("fast"); $(this).children(".handle").fadeIn("fast"); }else if(event.type === "mouseleave") { //鼠标离开 $(this).children(".info").hide(); $(this).children(".handle").hide(); } }); // 删除图片 $(document).on("click", ".file-iteme .handle", function(event){ $(this).parent().remove(); }); ``` > 提交时，获取所有的图片 ```javascript // 多图图片 var imgArr = []; var upload_list = $('.file-iteme'); if (upload_list.length<=0) { return layer.msg('请上传轮播图片', {icon: 2, time:1200}); } for (var i = 0; upload_list.length>i; i++) { imgArr.push($(upload_list[i]).children('img').attr('src')); } data.images = imgArr.join(';'); // 所有图片 ```