PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

本文实例讲述了php+ajax实现上传、删除、修改单张图片及后台处理逻辑操作。分享给大家供大家参考，具夜夜不休体如下：

2019-07-04更新

更新修改原因：

前台界面ui显示不好看后台处理逻辑混乱，涉及到多张图片处理起来很麻烦，所以修改成通过ajax上传/删除图片。

效果：

上传前：

上传后：

撤销后：

以下是更新的代码：

html

代码：

<div class="form-group"> &l末日使者怎么玩t;label for="urname" 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]监听    $("i教育部直属师范大学nput[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: fal, //上传文件不需要缓存        data:formdata,        processdata: fal, // 告诉jquery不要去处理发送的数据(规定通过请求发送的数据是否转换为查询字符串。默认是 true。)        contenttype: fal, // 告诉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)(/d/file/titlepic/ data )]);            layer.msg('上传成功', {icon: 6})          } el{            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})          }el{            layer.msg('删除失败', {icon: 5}专科毕业)          }        }      })      layer.clo(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;    }el{      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'])->tfield('pic', '');        if ($re!==fal){          return 1;        }      } el {        return 0;      }    } el {      return '参数错误';    }  }

分割线（下面是前几天写的答案，逻辑混乱。。。就不要看了吧）

前台处理：添加一个<input type="hidden" value="" name="pic">，会随着post一起提交到后台中去。 后台处理分为两步收到的post数据data中pic字段值为空时，且该栏目之前有图片，则执行删除原来图片操作；如果上传了新图片，则移动到指定目录下，并查询该栏目之前是否有图片，如果有，则执行删除原来图片操作；
html代码

<div class="form-group">  <label for="urname"      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">    {el/}    <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('确定撤销图片?', {icon: 3, title: '提示'}, function (index) {           $("#pic").val("");          $("#img").attr('src', '').css('display', 'none');          layer.clo(index);        });      } el {        layer.msg('未选择图片', {icon: 0});      }    })</script>

php代码

 //1.如果栏目原来有图片&&现在撤销了，就删除旧图片      if (($cate['pic'] != fal) && ($data['pic'] == fal)) {        @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']);          }        } el {          // 上传失败获取错误信息          $this->error($file->geterror());        }      }