zzwy2/view/manager/widget/image.html

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