219 lines
9.6 KiB
HTML
219 lines
9.6 KiB
HTML
<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> |