tp5.1结合layui实现多图上传

​ tp5.1结合layui实现多图上传,点击删除,点击放大功能.所谓多图上传,就是点击上传按钮时,在div中追加图片以及隐藏域,隐藏域用来存放图片路径,用于向后端传递数据.

HTML

<div class="layui-form-item">
    <label class="layui-form-label">轮播图</label>
    <div class="layui-input-inline upload" id="upload">
        <button type="button" class="layui-btn" id="test2" >多图片上传</button>
        <div class="layui-upload-list" id="demo2" style="width:1000px;" >
            {if condition="!empty($formData['carousel'])"}
            {foreach $formData['carousel'] as $value}
            <li class="item_img" style="display:inline; padding-left:10px;" title="点击放大" >
                <img src="{$value}"  width="100" height="100" class="img" style="padding-top: 10px;">
                <input type="hidden" name="carousel[]" value="{$value}" />
            </li>
            <i class="layui-icon del" >&#x1007;</i>
            {/foreach}
            {/if}
        </div>
    </div>
</div>

JavaScript

多图上传

layui.use(['upload'], function () {
    var $ = layui.jquery
        , upload = layui.upload;
    //多图上传
   upload.render({
            elem: '#test2'
            ,url: "{$yuming}" + '?prefix=fengmian'//改成自己的上传接口
            ,multiple: true
            ,before: function(obj){
                layer.msg('文件上传中...', {time: 3000});
            }
            ,done: function(res){
                if (res.code == 1) {
                    $('#demo2').append('<li class="item_img" style="display:inline; padding-left:10px;" title="点击放大" ><img src="' + res.data.file + '" class="img" width="100" height="100" style="padding-top:10px;" ><input type="hidden" name="carousel[]" value="' + res.data.file + '" />');
                    $('#demo2').append('<i class="layui-icon del">&#x1007;</i>');
                    delImg(); //删除图片
                    EnlargeImg();//放大图片
                }else {
                    //提示信息
                    layer.msg(res.msg);
                }
            }
        });
    })

点击图片放大

function EnlargeImg(){
    //点击图片放大
    $('.img').click(function(){
        var imgSrc = $(this).attr('src');
        layer.open({
            type:1
            ,title:false
            ,closeBtn:20
            ,shadeClose:true
            ,maxmin: true
            ,area: ['1200px','600px']
            ,content:'<img src=" '+imgSrc+' " height="600" width="1200">'
            // ,scrollbar:false
        })
    })
}
EnlargeImg();

删除图片

function delImg(){
           //删除图片
           $('.del').click(function(){
               $(this).prev().remove();
               $(this).remove();
               console.log($(this).prev());
           })
       }
       delImg();

PHP

public function add()
{
    if ($this->request->isPost()) {
        $data = $this->request->post();
        $data['carousel'] = serialize($data['carousel']); //接收传过来的图片数据 进行序列化
        $result = $this->validate($data, 'SystemVenus');
        if($result !== true) {
            return $this->error($result);
        }
        $model = new VenusModel();

        if ($model->save($data)) {

            return $this->success('添加成功','system/venus/index');
        }
        return $this->error('添加失败');

    }
    $this->assign('langlist', LangModel::where([])->order('id asc')->select());
    $this->assign('yuming', get_domain().'/qiniu.php');
    
    return $this->fetch('venusform');
}

页面效果

放大效果