PHP+ajax实现上传、删除、修改单张图片及后台处理

日期：2020-05-15 栏目：程序人生浏览：次

本文实例讲述了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实现自定义上传图片按钮并显示图片

代码：

   //上传图片
   //对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);
    });
    
  }

转载注明出处：http://www.heiqu.com/4002.html

PHP+ajax实现上传、删除、修改单张图片及后台处理

相关推荐