thinkphp3.2+layui 上傳多圖片及縮圖
阿新 • • 發佈:2018-12-20
多圖上傳,後端使用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'); } }
呼叫此方法,前端選擇多張圖片,會多次呼叫後端上傳方法。