{php}
use app\service\Image as WImage;
{/php}
<div class="upload-image-box">
<input type="hidden" class="append-val" value="{$append}">
<div id="upload_img_list{$append}" class="upload_img_list">
{if !empty($imgs)}
{foreach $imgs as $k => $img}
<dd class="item_img" id="img_{$append}{$k}">
<div class="imgs">
<div class="operate">
<i onclick="UPLOAD_IMG_DEL(this)" class="close layui-icon"></i>
</div>
<img src="{:WImage::getThumb($img.src, 100, 100)}"/>
<input type="hidden" name="{$fieldName}[{$k}][src]" value="{$img.src}" />
</div>
<div class="info">
{foreach $fields as $name => $desc}
<input type="text" class="layui-input" name="{$fieldName}[{$k}][{$name}]" value="{$img[$name] ?? ''}" placeholder="{$desc}" />
{/foreach}
</div>
</dd>
{/foreach}
{/if}
</div>
<div class="upload_img_btn" id="upload-images{$append}">
<i></i><p>上传图片</p>
</div>
<div class="upload_img_btn" id="serverImgList{$append}" style="margin-left: 15px;">
<i></i><p>服务器图片</p>
</div>
<div class="layui-clear"></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>
<style type="text/css">
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0;}
</style>
<script type="text/javascript">
var _token = $('#token').attr('content');
var append = $('.append-val').val();
$(document).on("click", ".layer-photos", function(e) {
layer.photos({
photos: {
"data": [{
"src": e.target.src
}]
},
anim: 5
});
});
$(document).ready(function() {
var numId = $('#upload_img_list{$append}>dd').length;
$(".upload_img_list").sortable({
cursor: "move",
items: "dd", //只是li可以拖动
opacity: 0.6, //拖动时，透明度为0.6
revert: true, //释放时，增加动画
update: function(event, ui) { //更新排序之后
//alert($(this).sortable("toArray"));
}
});
var uploadUrl = "{:url('manager.upload/image')}";
layui.use(['upload', 'element'], function() {
var upload = layui.upload;
var element = layui.element;
upload.render({
elem: '#upload-images{$append}',
url: uploadUrl,
data: {_token:_token},
field: 'image',
multiple: true,
before: function(obj) {
layer.msg('图片上传中...', {
icon: 16,
shade: 0.01,
time: 0
})
},
done: function(res) {
if(res.code === 0){
layer.close(layer.msg()); //关闭上传提示窗口
//调用多图上传方法,其中res.imgid为后台返回的一个随机数字
let fieldList = generateFiledHtml(numId);
$('#upload_img_list{$append}').append('<dd class="item_img" id="img_'+ append + numId +'">'+
'<div class="imgs"><div class="operate"><i onclick="UPLOAD_IMG_DEL(this)" class="close layui-icon"></i></div>'+
'<img src="' +res.data.thumb_src +'"></div>'+
'<input type="hidden" name="{$fieldName}['+numId+'][src]" value="'+ res.data.src +'" />'+
'<div class="info">'+ fieldList +'</div></dd>');
numId++;
$(window).trigger("resize");
}else{
layer.msg(res.msg);
}
}
})
$('#serverImgList{$append}').click(function(){
var fieldName = "{$fieldName}";
var html = '';
$.ajax('/manager/file/list',{
data:{
type:'img',
page:1,
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 id="selectable">'
$.each(data.data,function(i,item){
html += '<li><img src="'+item.src+'" data-box="upload_img_list{$append}" onclick="imgListUrl(this, ' + numId + ',\''+ fieldName +'\')"></li>'
})
html += '</ul></div>';
if(data.data.length >= 30){
html += '<div class="serverMore"><a data-box="upload_img_list{$append}" onclick="imgsList(this, ' + numId + ',\''+ fieldName +'\')">加载更多</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)
}
});
numId++;
}else{
layer.msg('暂无数据')
}
}
},
error:function(xhr,type,errorThrown){
}
});
})
});
});
function imgListUrl(obj, numId, fieldName) {
console.log(fieldName);
let fieldList = generateFiledHtml(numId, fieldName);
let imTpl = '<dd class="item_img" id="img_'+ append + numId +'">'+
'<div class="imgs"><div class="operate"><i onclick="UPLOAD_IMG_DEL(this)" class="close layui-icon"></i></div>'+
'<img src="' + $(obj).attr('src') +'"></div>'+
'<input type="hidden" name="'+fieldName+'['+numId+'][src]" value="'+ $(obj).attr('src') +'" />'+
'<div class="info">' + fieldList + '</div></dd>';
numId++;
$('#'+$(obj).attr('data-box')).append(imTpl);
parent.layer.close($(obj).attr('data-id'));
}
function generateFiledHtml(numId, fieldName) {
let fieldList = '';
{foreach $fields as $name => $desc}
fieldList += '<input type="text" class="layui-input" name="'+ fieldName +'['+numId+'][{$name}]" value="" placeholder="{$desc}" />';
{/foreach}
return fieldList;
}
var page = 2
function imgsList(obj, numId, fieldName) {
$.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')+'" onclick="imgListUrl(this, ' + numId + ', \''+ fieldName +'\')"></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 UPLOAD_IMG_DEL(divs) {
$(divs).closest('dd.item_img').remove()
};
</script>