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怎么实现上传、删除、修改单张图片”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！