css代码

<style>
        .layui-upload-img { width: 90px; height: 90px; margin: 0; }
        .pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
        .pic-more li { width:90px; float: left; margin-right: 5px;}
        .pic-more li .layui-input { display: initial; }
        .item_img:nth-child(8){
            clear: left;
        }
        .pic-more li a { position: absolute; top: 0; display: block; }
        .pic-more li a i { font-size: 24px; background-color: #008800; }
        #slide-pc-priview .item_img img{ width: 90px; height: 90px;}
        #slide-pc-priview li{position: relative;}
        #slide-pc-priview li .operate{ color: #000; display: none;}
        #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
        #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
        #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
        #slide-pc-priview li:hover .operate{ display: block;}
    </style>

html代码

<div class="layui-form-item layui-form-text">
                <label class="layui-form-label">相关图片</label>
                <div class="layui-input-block" style="width: 90%;">
                    <div class="layui-upload">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="slide-pc">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <div class="pic-more">
                                <ul class="pic-more-upload-list" id="slide-pc-priview">
                                    {volist name="arr" id="vo"}
                                    　　<li class="item_img">
                                    <div class="operate">
                                        <i class="close layui-icon layui-icon-close-fill layuiadmin-button-btn"></i>
                                    </div>
                                    <img src="{$vo}" class="img" >
                                    <input type="hidden" name="pc_src[]" value="{$vo}" />
                                </li>
                                    {/volist}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

JS代码

<script>layui.use(['form', 'layer', 'upload'],
    function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;
        //上传图片
        var uploadInst = upload.render({
            elem:'#slide-pc'
            ,url:'{:url("okadmin/Other/uploadBanner")}'
            ,accept:'jpg|png|jpeg'  // 允许上传的文件类型
            ,auto:true // 自动上传
            ,before:function (obj) {
                // console.log(obj);
                // 预览
                obj.preview(function(index,file,result) {
                    // console.log(file.name);    //图片名字
                    // console.log(file.type);    //图片格式
                    // console.log(file.size);    //图片大小
                    // console.log(result);    //图片地址
                });
                // layer.load();
            }
            // 上传成功回调
            ,done:function(res) {
                $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="close layui-icon layui-icon-close-fill layuiadmin-button-btn"></i></div><img src="/uploads/image/' + res['data']['src'] + '" class="img" ><input type="hidden" name="pc_src[]" value="/uploads/image/' +res['data']['src'] + '" /></li>');
                // $('#banner').val(res['data']['src']);
                // console.log(res['data']['src']);
            }
            // 上传失败回调
            ,error:function(index,upload) {
                // 上传失败
            }
        });
        //监听提交
        form.on('submit(add)',
            function(data) {
                //发异步，把数据提交给php
                var arr = new Array();
                $("input:checkbox[name='orgs']:checked").each(function(i){
                    arr[i] = $(this).val();
                });
                data.field.orgs = arr.join(",");//将数组合并成字符串
                // console.log(data.field);
                $.post("{:url('save')}",data.field,function(result){
                    // result = $.parseJSON(result);
                    if(result.code != '1'){
                        layer.alert(result.msg, {
                            icon: 5
                        });
                    }else{
                        layer.alert(result.msg, {
                                icon: 6
                            },
                            function() {
                                //关闭当前frame
                                xadmin.close();
                                parent.layui.table.reload('bllist');
                            });
                    }
                });
                return false;
            });
        //点击多图上传的X,删除当前的图片
        $("body").on("click",".close",function(){
            $(this).closest("li").remove();
        });
    });

PHP代码

if(isset($post['id'])){
                //校验                
                if(!$validater->scene('modify')->check($post)){
                    return json(['data'=>'','code'=>0,'msg'=>$validater->getError()]);
                }
                //获取全部提交数据
                $images = $post['pc_src'];
                $id = $post['id'];
                unset($post['pc_src']);
                $bl_mod->startTrans();
                //插入主表数据
                // $post['modify_time'] = time();
                // $post['modify_ip'] = request()->ip();
                //插入主表数据
                $bl_mod->allowField(true)->isUpdate(true)->save($post);
                //单独处理附件图片
                $attatch_mod = new model\Attatch();
                //先查出全部数据，然后对比数据，相同的跳过，不同的新增或者删除
                $theSames = $attatch_mod->where(['bid'=>$id])->select();
                foreach ($theSames as $kk=>$vv){
                    $file = $theSames[$kk]['file'];
                    //重置下标
                    foreach ($images as $k=>$v){
                        if($file == $images[$k]){
                            unset($images[$k]);
                            unset($theSames[$kk]);
                            continue;
                        }
                    }
                }
                //删除$theSames中的数据
                foreach ($theSames as $v){
                    $attatchid = $v['id'];
                    $attatch_mod->where('id',$attatchid)->delete();
                }
                //存储$images中的数据
                foreach ($images as $v){
                    $target = $v;
                    if(substr($target, 0 , 1) == 'h'){
                        $upStr = config('systemConfig.fulldomain').'/uploads/image/';
                        $count=strpos($v,$upStr);
                        $length = strlen($upStr);
                        $img = substr_replace($v,"",$count,$length);
                    }
                    $data['bid'] = $id;
                    $data['file'] = $img;
                    $data['type'] = 'image';
                    $data['mime'] = 'image/jpeg';
                    $data['create_time'] = time();
                    $data['create_ip'] = request()->ip();
                    $attatch_mod->data($data, true)->isUpdate(false)->save();
                }
                $bl_mod->commit();
                return json(['data'=>'','code'=>1,'msg'=>'操作成功']);
            }