zzwy2/view/manager/widget/image.html

193 lines
8.0 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<div class="upload-image-box {$className ?? ''}">
<div id="list{$append}" class="upload_img">
{if !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="img{$append}" value="{$src ?? ''}" class="layui-file picker-file-value"/>
</div>
<div class="upload-image-points">
{if isset($midStr) && !empty($midStr)}
<div class="layui-form-mid layui-word-aux w-ratio-100">{$midStr|raw}</div>
{/if}
{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 _token = $('#token').attr('content');
var page = 1;
$(document).on("click",".layer-photos",function(e){
layer.photos({
photos: { "data": [{"src": e.target.src}] }
,anim: 5
});
});
$(document).ready(function(){
var uploadUrl = "{:url('manager.upload/image')}";
layui.use(['upload','element'], function(){
var upload = layui.upload;
var element = layui.element;
var uploadInst = upload.render({
elem: "#upload-image{$append}"
,url: uploadUrl
,data: {thumb: {$thumb},_token:_token}
,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 = '';
page = 1;
$.ajax('/manager/file/list',{
data:{
type:'img',
page:page,
size:30
},
headers: {
'X-CSRF-TOKEN': _token
},
dataType:'json',//服务器返回json格式数据
type:'post',//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 >= 30){
html += '<div class="serverMore"><a data-box="list{$append}" data-input="picker{$append}" onclick="imgList(this)">加载更多</a></div>'
page++
}
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){
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'));
parent.layer.close($(obj).attr('data-id'));
}
function imgList(obj){
$.ajax('/manager/file/list',{
data:{
type:'img',
page:page,
size:30
},
headers: {
'X-CSRF-TOKEN': _token
},
dataType:'json',//服务器返回json格式数据
type:'post',//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 < 30){
$(obj).parent().append('<p>没有了</p>')
$(obj).parent().find('a').remove();
}else{
page++;
}
}else{
layer.msg(data.msg)
}
}
},
error:function(xhr,type,errorThrown){
}
});
}
function imgdel(obj){
$(obj).closest('.upload-image-box').find('.picker-file-value').val('');
$(obj).parent().remove();
}
</script>