#### 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(';'); // 所有圖片 ```