## 1.form表單 ``` <div class="layui-form-item"> <label class="layui-form-label">商品主圖</label> <div class="layui-input-block"> <a id="btn-thumb"><img src="/static/index/images/thumb.jpg" id="thumb-preview" style="cursor:pointer;width:100px; height:100px;"></a> <!-- 路徑 --> <input type="hidden" name="goods_thumb" id="input-thumb" value=""> <button class="layui-btn layui-btn-danger" lay-filter="demo1" id="cancel" type="button">刪除圖片</button> </div> </div> ``` ## 2.ajax代碼 ``` <script> //主圖上傳 layui.use('upload', function(){ var $ = layui.jquery; var upload = layui.upload; var uploadInst = upload.render({ elem:'#btn-thumb', url: "{:url('/seller_Goods/upload')}", size:2500, exts: 'jpg|png|jpeg', before: function(obj){ obj.preview(function(index,thumb, result){ $('#thumb-preview').attr('src',result); }); }, done: function(res){ console.log(res); if(res.code == 0){ return layer.msg(res.message); } $('#input-thumb').val(res.filepath); } }); }); </script> ``` ## 3.控制器 ``` //通用多圖上傳接口 public function upload() { if($this->request->isPost()){ $res['code']=1; $res['msg'] = '上傳成功！'; $file = $this->request->file('file'); $info = $file->move('./upload/store_goods/'); if($info){ $res['name'] = $info->getFilename(); $res['filepath'] = '/'.str_replace('\\','/',$info->getSaveName()); }else{ $res['code'] = 0; $res['msg'] = '上傳失敗！'.$file->getError(); } return $res; } } //多圖刪除頭像 public function delimg(){ $imgurl=input('imgurl'); $imgurl='./upload/store_goods'. $imgurl; $res=unlink($imgurl); if($res){ echo 1; //刪除文件成功 }else{ echo 2;//刪除文件失敗 } } ```