<style> .upload_img{ float: left;} .upload_img .img-item{float: left; margin:0 15px 15px 0;position: relative;text-align: center;display: inline-block;} .upload_img .img-item i{ width: 16px; height: 16px; cursor: pointer; background: url(__MANAGER__/image/ico_close4.png) no-repeat center; background-size: 100%; padding: 2px; line-height: 15px; text-align: center; color: #fff; margin-left: 1px; float: left; position: absolute; right: -8px; top: -8px;} .upload_img .img-item img{ width: 60px; height: 60px; object-fit: cover; border-radius: 5px; float: left;} .upload_img .item-src{object-fit: contain;width: 100%;height: 100%;} .upload_img .img-item:hover .operate{display: block} .upload_img .operate{position: absolute;background: #0707079c;color: #fff;width: 100%;bottom: 0px;display: none} .upload_img .operate a{float: left;width: 33.3%;text-align: center;padding: 5px 0px;} .layer-photos img,.layer-video video{ cursor: zoom-in;} .upload_img_btn{ min-width: 60px; height: 60px; background: #2887fc; border-radius: 5px; color: #fff; text-align: center; float: left; font-size: 12px; cursor: pointer; margin-bottom: 15px; transition: all .6s;} .upload_img_btn i{ display: block; height: 15px; background: url(__MANAGER__/image/ico_upload.png) no-repeat center; background-size: auto 100%; margin: 13px 0 2px;} .upload_img_btn p{ padding: 0 6px;} .upload_img_btn:hover{ background-color: #1970D9;} .upload-image-points .layui-form-mid{ padding-top: 0 !important;} .upload-image-box,.upload-video-box{ text-align: left;} .serverImgsList ul{ margin: 0 -5px;} .serverImgsList ul li{ width: 16.666%; height: 85px; float: left; padding: 0 5px; margin-bottom: 10px;} .serverImgsList ul li img{ width: 100%; height: 100%; object-fit: cover; cursor: pointer;} .serverMore{ width: 100%; float: left; text-align: center; padding: 10px 0 20px;} .serverMore a{ cursor: pointer;} </style> <div class="upload-image-box"> <div id="list{$append}" class="upload_img"> {if file_exists('.'.$src)&&!empty($src)} <div class="img-item"> <i class="close" onclick="imgdel(this)"></i> <div class="layer-photos"><img class="listsimg" src="{$src}" layer-src="{$src}" /></div> </div> {/if} </div> <div class="upload_img_btn" id="upload-image{$append}"> <i></i><p>上传图片</p> </div> <div class="upload_img_btn" id="serverImgs{$append}" style="margin-left: 15px;"> <i></i><p>服务器图片</p> </div> <div class="upload layui-clear"> <div class="layui-clear"></div> <div class="upload-image-points"> <p id="upload-image-src{$append}"></p> <input type="hidden" id="picker{$append}" name="{$fieldName}" value="{$src ?? ''}" class="layui-file"/> </div> <div class="upload-image-points"> {if !empty($imgSize)} <div class="layui-form-mid layui-word-aux">注:图片最佳尺寸为: {$imgSize} 数字0表示不限制</div> {else /} <div class="layui-form-mid layui-word-aux">请上传大小合适的图片</div> {/if} </div> </div> </div> <script type="text/javascript"> var listSize = 3; var listPage = 2; layui.use(['jquery', 'upload', 'element', 'layer'], function () { let $ = layui.jquery , upload = layui.upload , element = layui.element , layer = layui.layer; $(document).on("click",".layer-photos",function(e){ layer.photos({ photos: { "data": [{"src": e.target.src}] } ,anim: 5 }); }); var uploadInst = upload.render({ elem: "#upload-image{$append}" ,url: '/manager/upload/image' ,data: {thumb: {$thumb}} ,field: 'image' ,accept: 'images' ,acceptMime: 'image/*' ,choose: function(obj){ var previewElem = "#list{$append}"; obj.preview(function(index, file, result){ var imTpl = '<div class="img-item"><i class="close" onclick="imgdel(this)"></i>'+ '<div class="layer-photos"><img class="listsimg" src="'+result+'" layer-src="'+result+'" /></div>'+ '</div>'; $(previewElem).html(imTpl); $(window).trigger("resize"); }); } ,before: function(obj){ layer.load(); } ,done: function(res, index, upload){ var imgInput = "#picker{$append}"; layer.closeAll('loading'); if(res.code === 0) { $(imgInput).val(res.data.src); } else { $(imgInput).val(''); layer.msg(res.msg,{time:1500}); } } ,error: function(index, upload){ layer.closeAll('loading'); } }); $('#serverImgs{$append}').click(function(){ var html = ''; $.ajax('/manager/file/list',{ data:{ type: 'img', page: 1, size: listSize }, dataType:'json',//服务器返回json格式数据 type:'get',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ if(data.code === 0){ if(data.data.length > 0){ html += '<div class="layui-card-body"><div class="serverImgsList"><ul>' $.each(data.data,function(i,item){ html += '<li><img src="'+item.src+'" data-box="list{$append}" data-input="picker{$append}" onclick="imgUrl(this)"></li>' }) html += '</ul></div>'; if(data.data.length >= listSize){ html += '<div class="serverMore"><a data-box="list{$append}" data-input="picker{$append}" onclick="imgList(this)">加载更多</a></div>' } html += '<div class="layui-clear"></div></div>'; layer.open({ type: 1, title: '服务器图片', shadeClose: true, area: ['800px',''], //宽高 move: false, content: html, success:function(layero, index) { alertRender() layero.find('.serverImgsList ul li img').attr('data-id',index) layero.find('.serverMore a').attr('data-id',index) } }); }else{ layer.msg('暂无数据') } } }, error:function(xhr,type,errorThrown){ } }); }) }) function imgUrl(obj){ layui.use(['jquery'], function() { let $ = layui.jquery; var imTpl = '<div class="img-item"><i class="close" onclick="imgdel(this)"></i>'+ '<div class="layer-photos"><img class="listsimg" src="'+$(obj).attr('src')+'" layer-src="'+$(obj).attr('src')+'" /></div>'+ '</div>'; $('#'+$(obj).attr('data-box')).html(imTpl); $('#'+$(obj).attr('data-input')).val($(obj).attr('src')); console.log($(obj).attr('data-id'), 'close') parent.layer.close($(obj).attr('data-id')); }) } function imgList(obj){ layui.use(['jquery'], function() { let $ = layui.jquery; $.ajax('/manager/file/list',{ data:{ type: 'img', page: listPage, size: listSize }, dataType:'json',//服务器返回json格式数据 type:'get',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ if(data.code === 0){ if(data.data.length > 0){ var html = '' $.each(data.data,function(i,item){ html += '<li><img src="'+item.src+'" data-id="'+$(obj).attr('data-id')+'" data-box="'+$(obj).attr('data-box')+'" data-input="'+$(obj).attr('data-input')+'" onclick="imgUrl(this)"></li>' }) $(obj).parent().parent().find('.serverImgsList ul').append(html) $(window).trigger("resize"); if(data.data.length < listSize){ $(obj).parent().append('<p>没有了</p>') $(obj).parent().find('a').remove(); }else{ listPage++; } }else{ layer.msg(data.msg) } } }, error:function(xhr,type,errorThrown){ } }); }) } function imgdel(obj){ layui.use(['jquery'], function(){ let $ = layui.jquery; $('#picker{$append}').val(''); $(obj).parent().remove(); }) } </script>