thinkphp使用ajax圖集上傳 · php知識點總結

## 1.form表單 ``` <div class="layui-form-item" id="pics"> <div class="layui-form-label">相冊圖集</div> <div class="layui-input-block" style="width: 70%;"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">選擇多圖</button> <div class="pic-more"> <ul class="pic-more-upload-list" id="slide-pc-priview"> </ul> </div> </div> </div> </div> ``` ## 2.ajax代碼 ``` <script> //圖集上傳 layui.use('upload', function(){ var $ = layui.jquery; var upload = layui.upload; upload.render({ elem: '#slide-pc', url: "{:url('/seller_Goods/upload')}", size: 500, exts: 'jpg|png|jpeg', multiple: true, before: function(obj) { layer.msg('圖片上傳中...', { icon: 16, shade: 0.01, time: 0 }) }, done: function(res) { layer.close(layer.msg());//關閉上傳提示窗口 if(res.status == 0) { return layer.msg(res.message); } $('#slide-pc-priview').append('<li class="item_img" style="width: 90px;float: left;margin-right: 5px;"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i class="close layui-icon"></i></div><img src="/upload/store_goods/' + res.filepath + '" class="img" ><input type="hidden" id="pc_src" name="pc_src[]" value="' + res.filepath + '" /></li>'); } }); }); //點擊多圖上傳的X,刪除當前的圖片 $("body").on("click",".close",function(){ var imgurl = $(this).parent().siblings("input[type='hidden']").val(); if(!imgurl){ layer.msg('請先上傳圖片！', {icon: 2}); return false; } $.ajax({ type:"post", dataType:"json", data:{imgurl:imgurl}, url:"{:url('/seller_Goods/delimg')}", success:function(data){ if(data==1){ layer.msg('撤銷成功！', {icon: 1}); }else{ layer.msg('撤銷失敗！', {icon: 2}); } } }); $(this).closest("li").remove(); }); //多圖上傳點擊<>左右移動圖片 $("body").on("click",".pic-more ul li .toleft",function(){ var li_index=$(this).closest("li").index(); if(li_index>=1){ $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1)); } }); $("body").on("click",".pic-more ul li .toright",function(){ var li_index=$(this).closest("li").index(); $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1)); }); </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;//刪除文件失敗 } } ``` ## 4.圖集新建數據表保存 ``` //添加商品圖集 $attr_src = isset($data['pc_src']) ? $data['pc_src'] : ""; if(!empty($attr_src)){ $src = array(); foreach ($attr_src as $k => $v) { $goods_gallery = array( 'goods_id' => $goods_id, 'goods_gallery_1' => $k, //排序 'goods_gallery_2' => $v, //地址 ); db('goods_gallery')->insert($goods_gallery); } } ```