PHP+ajax實現上傳、刪除、修改單張圖片及後臺處理邏輯操作詳解
阿新 • • 發佈:2020-02-14
本文例項講述了PHP+ajax實現上傳、刪除、修改單張圖片及後臺處理邏輯操作。分享給大家供大家參考,具體如下:
2019-07-04更新
更新修改原因:
- 前臺介面ui顯示不好看
- 後臺處理邏輯混亂,涉及到多張圖片處理起來很麻煩,所以修改成通過ajax上傳/刪除圖片。
效果:
上傳前:
上傳後:
撤銷後:
以下是更新的程式碼:
HTML
- 程式碼:
<div class="form-group"> <label for="username" class="col-sm-2 control-label no-padding-right">縮圖 </label> <div class="col-sm-6"> <input type="hidden" id="pic" value="" name="pic"> <!-- 要將父佈局的position設定為relative,父佈局將無法包裹input --> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-palegreen" style="position: relative;margin-right: 10px;" id="xian"> <!--設定input的position為absolute,使其不按文件流排版,並設定其包裹整個佈局 --> <!-- 設定opactity為0,使input變透明 --> <input type="file" name="pic" accept="image/*" style="opacity: 0;position: absolute">上傳圖片</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-magenta" onclick="delimg(this)" style="display: none" id="che">撤銷圖片</a> </div> </div>
要點: 重點都在註釋裡了。
參考: JS+HTML實現自定義上傳圖片按鈕並顯示圖片
JS
- 程式碼:
//上傳圖片 //對input[type=file]監聽 $("input[name=pic]").on('change',function () { var e=$(this); var file=e[0].files[0]; var formData=new FormData(); formData.append("pic",file);//這裡給圖片賦的name要與下面php中接收的post值對應 $.ajax({ url: "{:url('upimg')}",type:'POST',cache: false,//上傳檔案不需要快取 data:formData,processData: false,// 告訴jQuery不要去處理髮送的資料(規定通過請求傳送的資料是否轉換為查詢字串。預設是 true。) contentType: false,// 告訴jQuery不要去設定Content-Type請求頭(傳送資料到伺服器時所使用的內容型別。預設是:"application/x-www-form-urlencoded"。) success:function (data) { if (data){ $("#xian").hide(); $("#che").show(); $("#pic").val(data); e.parents(".col-sm-6").append("[外鏈圖片轉存失敗(img-wg119lWd-1562224226091)(https://mp.csdn.net/mdeditor/%22+data+%22)]"); layer.msg('上傳成功',{icon: 6}) } else{ layer.msg('上傳失敗',{icon: 5}) } } }) }) //刪除圖片 function delimg(e) { layer.confirm('確定刪除?',{icon: 3,title:'提示'},function(index){ //do something var id="{$article.id}"; var imgpath = $(e).siblings('img:last').attr('src'); $.ajax({ url:"{:url('delimg')}",type:'post',data: {pic:imgpath},success:function (data) { if(data){ $("#xian").show(); $("#che").hide(); $("#pic").val(""); $(e).siblings('img').hide(); layer.msg('刪除成功',{icon: 6}) }else{ layer.msg('刪除失敗',{icon: 5}) } } }) layer.close(index); }); }
這裡有句程式碼展示有問題,原始碼如下:
要點 :
JS formDate的使用
上傳成功後返回圖片路徑,塞到input[type=hidden]框裡,之後會隨著表單提交上去,儲存在資料庫中。
參考: JavaScript實現圖片上傳並預覽並提交ajax
PHP
- 程式碼:
//ajax上傳圖片 public function upimg() { $file = request()->file('pic');//這裡接收到的圖片name要與上面js中formData賦值對應 if ($file) { $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'articleimg'); $imgpath = '/uploads/articleimg/' . $info->getSaveName(); return $imgpath; }else{ return 0; } } //ajax刪除圖片 public function delimg() { $data = input('post.'); if ($pic = $data['pic']) { $imppath = ROOT_PATH . 'public' . $pic; if (@unlink($imppath)) { //這裡要對資料庫中的Pic欄位進行即時修改。嗯嗯 $re=db('article')->where('id',$data['id'])->setField('pic',''); if ($re!==false){ return 1; } } else { return 0; } } else { return '引數錯誤'; } }
分割線(下面是前幾天寫的答案,邏輯混亂。。。就不要看了吧)
- 前臺處理:
- 新增一個
<input type="hidden" value="" name="pic">
,會隨著post一起提交到後臺中去。
- 後臺處理分為兩步
- 收到的post資料data中pic欄位值為空時,且該欄目之前有圖片,則執行刪除原來圖片操作;
- 如果上傳了新圖片,則移動到指定目錄下,並查詢該欄目之前是否有圖片,如果有,則執行刪除原來圖片操作;
html程式碼
<div class="form-group"> <label for="username" class="col-sm-2 control-label no-padding-right">欄目圖片</label> <div class="col-sm-6"> <input type="hidden" name="pic" value="{$ca.pic}" id="pic"> <input type="file" id="file" accept="image/*" name="pic" style="display: inline-block"> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-warning shiny" id="returnimg"><i class="menu-icon fa fa-repeat"></i>撤銷圖片</a> {notempty name='$ca.pic'} <img src="{$ca.pic}" alt="圖片" id="img" style="width: 50px;margin-top:10px;display: block"> {else/} <img src="" alt="圖片" id="img" style="width: 50px;margin-top:10px;display: none"> {/notempty} </div> </div>
js程式碼
<script> //圖片撤銷 $("#returnimg").on('click',function () { let img = $("#img").attr('src'); if (img) { layer.confirm('確定撤銷圖片?',title: '提示'},function (index) { $("#pic").val(""); $("#img").attr('src','').css('display','none'); layer.close(index); }); } else { layer.msg('未選擇圖片',{icon: 0}); } }) </script>
php程式碼
//1.如果欄目原來有圖片&&現在撤銷了,就刪除舊圖片 if (($cate['pic'] != false) && ($data['pic'] == false)) { @unlink(ROOT_PATH . 'public' . $cate['pic']); } //如果上傳了新的圖片 $file = request()->file('pic'); // 移動到框架應用根目錄/public/uploads/ 目錄下 if ($file) { $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'cateimg'); if ($info) { // 成功上傳後 獲取上傳資訊 $pic = '/uploads/cateimg/' . $info->getSaveName(); $data['pic'] = $pic; //2.新的圖片上傳成功後,如果欄目原來有圖片,刪除原來欄目圖片 if ($cate['pic']) { @unlink(ROOT_PATH . 'public' . $cate['pic']); } } else { // 上傳失敗獲取錯誤資訊 $this->error($file->getError()); } }
更多關於PHP相關內容可檢視本站專題:《PHP+ajax技巧與應用小結》、《PHP網路程式設計技巧總結》、《php字串(string)用法總結》、《php+mysql資料庫操作入門教程》及《php常見資料庫操作技巧彙總》
希望本文所述對大家PHP程式設計有所幫助。