thinkphp3.2+layui 上传多图片及缩略图

多图上传，后端使用thinkphp3.2，前端使用layui。上传图片后，并生成缩略图。

 

前端html：

<div class="layui-upload">
    <button type="button" class="layui-btn" id="manyUpload">多图片上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="previewImg"></div>
    </blockquote>
    <input type="hidden" name="images" id="images">
</div>

 

js代码：

layui.use('upload', function(){
    var $ = layui.jquery
        ,upload = layui.upload;

  upload.render({
    elem: '#manyUpload'
    ,url: '{:U("Upload/index")}?dir=icon'
    ,multiple: true
    ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
            $('#previewImg').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
        });
    }
    ,done: function(res){
        //上传完毕
        console.log(res);
        if (res.type==1){
            var image_path = res.image_path;
            var thumb = res.thumb_image;
            var images = $('#images').val();
            $('#images').val(images+'#'+image_path+','+thumb); //这里我拼接了图片地址，数据添加时再去解析就行
        } else {
            layer.msg('文件大小不能超过2M',{icon:2})
        }
    }
  });

});

 

 

后端代码：

public function upload() {
    $dir = empty(I('get.dir')) ? 'Uploads/Ad/' : 'Uploads/' . I('get.dir') . '/';
    if(!is_dir($dir)){
        mkdir($dir, 0755, true);
    }

    $config = array(
        'maxSize' => 2 * 1024 * 1024,
        'rootPath' => './',
        'savePath' => $dir,
        'saveName' => array('uniqid', ''),
        'exts' => array('jpg', 'gif', 'png', 'jpeg'),
        'autoSub' => true,
        'subName' => array('date', 'Ymd'),
    );

    $upload = new Upload($config);// 实例化上传类
    $info = $upload->upload();

    if ($info) {
        $image_path = '';
        $thumb_image = '';
        foreach ($info as $v) {
            $image_path = $v['savepath'] . $v['savename'];

            //生成缩略图
            $img = $v['savepath'].$v['savename'];//获取文件上传目录
            $image = new \Think\Image();
            $image->open($img);  //打开上传图片
            $thumb_image = $v['savepath'].'thumb_'.$v['savename'];
            $image->thumb(300, 300,\Think\Image::IMAGE_THUMB_SCALE)->save($thumb_image);//生成等比缩略图
        }

        $res = [
            'type' => 1,
            'msg' => 'success',
            'image_path' => $image_path,
            'thumb_image' => $thumb_image,
        ];
        $this->ajaxReturn($res, 'json');

    } else {
        $res = [
            'type' => 2,
            'msg' => $upload->getError()
        ];
        $this->ajaxReturn($res, 'json');
    }

}

 

调用此方法，前端选择多张图片，会多次调用后端上传方法。