先修改extend下的form.php的images
public function images($info, $value)
{
$info['setup'] = is_array($info['setup']) ? $info['setup'] : string2array($info['setup']);
$field = $info['field'];
$action = Request::action(true);
if ($action == 'add') {
$value = $value ? $value : (isset($info['setup']['default']) ? $info['setup']['default'] : '');
} else {
if (isset($this->data[$field]) && $this->data[$field]) {
$images = $this->data[$field];
} else {
$images = '';
}
$value = $value ? $value : $images;
}
$data = '';
$i = 0;
$aids = '';
if ($value) {
$options = json_decode($value, true);
if (is_array($options)) {
foreach ($options as $k => $r) {
$aids .= $k . ',';
$data .= '
<li class="pics_box">
<div class="layui-col-md3">
<div class="dtbox">
<img src="' . $r . '" class="layui-upload-img">
<input type="hidden" name="' . $field . '[' . $k . ']" class="' . $info['class'] . '" value="' . $r . '">
<input type="hidden" class="oldaid" name="aids[' . $field . '][]" value="' . $k . '">
<i class="delimg layui-icon ">ဆ</i>
<i class="toleft left' . $info['class'] . ' layui-icon "></i>
<i class="toright right' . $info['class'] . ' layui-icon"></i>
</div>
</div>
</li>';
}
}
}
$parseStr = '<div class="layui-col-md6">';
$parseStr .= '<div class="layui-upload">';
$parseStr .= '<button type="button" class="layui-btn" id="' . $info['class'] . '">多图片上传</button> <button type="button" data-input="' . $info['class'] . '" data-aids="' . substr($aids, 0, -1) . '" class="layui-btn layui-btn-normal" layadmin-event="getAttaImgs">选择图片</button >';
$parseStr .= '<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">';
$parseStr .= '预览图:<div class="layui-upload-list" id="demo' . $info['class'] . '">
<div class="layui-row layui-col-space10"><ul>' . $data . '</ul></div></div> </blockquote></div></div>';
$parseStr .= "<script>
layui.use('upload', function () {
var upload = layui.upload;
var imagesSrc;
upload.render({
elem: '#" . $info['class'] . "',
url: '" . url('Upfiles/upimage') . "',
multiple: true,
done: function(res){
$('#demo" . $info['class'] . " .layui-row ul').append('<li class=\"pics_box\"><div class=\"layui-col-md3\"><div class=\"dtbox\"><img src=\"'+ res.url +'\" class=\"layui-upload-img\"><input type=\"hidden\" class=\"imgVal\" name=\"" . $field . "['+res.aid+']\" value=\"'+ res.url +'\"> <input type=\"hidden\" name=\"aids[" . $field . "][]\" class=\"oldaid\" value=\"'+res.aid+'\"><i class=\"delimg layui-icon\">ဆ</i><i class=\"toleft left" . $info['class'] . " layui-icon \"></i><i class=\"toright right" . $info['class'] . " layui-icon\"></i></div></div></li>');
imagesSrc +=res.url+';';
}
});
})
</script>";
$parseStr .= '<script>
$("body").on("click",".layui-row ul li .left' . $info['class'] . '",function(){
var li_index=$(this).closest("li").index();
if(li_index>=1){
$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
}
});
$("body").on("click",".layui-row ul li .right' . $info['class'] . '",function(){
var li_index=$(this).closest("li").index();
$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
});
</script>';
return $parseStr;
}
再修改/fly/src/layuiadmin/modules/content.js 的多图
//多图
admin.events.getAttaImgs = function (images) {
var imgId = images.data('input');
var oldAids = '';
var box = images.siblings('blockquote').children('#demo'+imgId).children('.layui-row').children('ul');
box.find('.oldaid').each(function(){
oldAids+=$(this).val()+',';
});
var that = this;
layer.open({
type: 2
,title: '图片资源'
,area: ['700px', '690px']
,shade: 0
,anim: 1
,content: '/admin/attachment/getList.html?type=2&oldAids='+oldAids
,btn: ['选择','取消'] //只是为了演示
,yes: function(index){
var body = layer.getChildFrame('body', index);
var imgHtml='';
body.find('.select').each(function(){
var aid = $(this).data('id');
var url = $(this).data('url');
imgHtml +='<li class="pics_box"><div class="layui-col-md3">' +
'<div class="dtbox"><img src="'+url+'" class="layui-upload-img">' +
'<input type="hidden" name="'+imgId+'['+aid+']" class="'+imgId+'" value="'+url+'">' +
'<input type="hidden" name="aids['+imgId+'][]" class="oldaid" value="'+aid+'"><i class="delimg layui-icon">ဆ</i><i class="toleft left'+imgId+' layui-icon "></i><i class="toright right'+imgId+' layui-icon"></i></div></div></li>';
});
box.append(imgHtml);
layer.close(index);
}
,btn2: function(){
layer.closeAll();
}
,zIndex: layer.zIndex //重点1
,success: function(layero,index){
}
});
};
最后添加css
<style>
.toleft{ color: #000; display: none;}
.toright{ color: #000; display: none;}
.toleft{ position: absolute;top: 60px; left: 2px; cursor:pointer;}
.toright{ position: absolute;top: 60px; right: 2px;cursor:pointer;}
.pics_box:hover .toleft{ color: #333;font-size:22px;display: block;}
.pics_box:hover .toright{ color: #333;font-size:22px;display: block;}
.tit_toleft{ color: #000; display: none;}
.tit_toright{ color: #000; display: none;}
.tit_toleft{ position: absolute;top: 60px; left: 2px; cursor:pointer;}
.tit_toright{ position: absolute;top: 60px; right: 2px;cursor:pointer;}
.pics_box:hover .tit_toleft{ color: #333;font-size:22px;display: block;}
.pics_box:hover .tit_toright{ color: #333;font-size:22px;display: block;}
</style>
上效果图
下一篇:CLTPHP充值平台上线啦