PHP+ajax怎么實現上傳、刪除、修改單張圖片

本篇內容主要講解“PHP+ajax怎么實現上傳、刪除、修改單張圖片”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“PHP+ajax怎么實現上傳、刪除、修改單張圖片”吧!

更新修改原因：

1. 前臺界面ui顯示不好看后臺處理邏輯混亂，涉及到多張圖片處理起來很麻煩，所以修改成通過ajax上傳/刪除圖片。

效果：

上傳前：上傳后：撤銷后：以下是更新的代碼：

HTML

代碼：

<p class="form-group"> <label for="username" class="col-sm-2 control-label no-padding-right">縮略圖    </label> <p 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"  id="xian">   <!--設置input的position為absolute，使其不按文檔流排版，并設置其包裹整個布局 -->   <!-- 設置opactity為0，使input變透明 -->   <input type="file" name="pic" accept="image/*" >上傳圖片</a>   <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-magenta" onclick="delimg(this)"  id="che">撤銷圖片</a> </p></p>

要點： 重點都在注釋里了。

參考： 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 '參數錯誤';    }  }

到此，相信大家對“PHP+ajax怎么實現上傳、刪除、修改單張圖片”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！