多圖上傳，後端使用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');
    }

}
 

呼叫此方法，前端選擇多張圖片，會多次呼叫後端上傳方法。