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>
|