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


Posted in PHP onFebruary 12, 2020

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

2019-07-04更新

更新修改原因:

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

效果:

上传前:
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
上传后:
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
撤销后:
PHP+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);
    });
    
  }

这里有句代码展示有问题,源码如下:
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

要点
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 '参数错误';
    }
  }

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


  1. 前台处理:
  • 添加一个<input type="hidden" value="" name="pic">,会随着post一起提交到后台中去。
    PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
  1. 后台处理分为两步
  • 收到的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('确定撤销图片?', {icon: 3, 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程序设计有所帮助。

PHP 相关文章推荐
用PHP编程开发“虚拟域名”系统
Oct 09 PHP
pw的一个放后门的方法分析
Oct 08 PHP
PHP令牌 Token改进版
Jul 18 PHP
一步一步学习PHP(3) php 函数
Feb 15 PHP
php foreach正序倒序输出示例代码
Jul 01 PHP
php中的ini配置原理详解
Oct 14 PHP
PHP防止注入攻击实例分析
Nov 03 PHP
php实现window平台的checkdnsrr函数
May 27 PHP
PHP中的常见魔术方法功能作用及用法实例
Jul 01 PHP
适合PHP初学者阅读的4本经典书籍
Sep 23 PHP
Yii2使用表单上传文件的实例代码
Aug 03 PHP
PHP实现双链表删除与插入节点的方法示例
Nov 11 PHP
分享8个Laravel模型时间戳使用技巧小结
Feb 12 #PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
Feb 11 #PHP
thinkphp5框架路由原理与用法详解
Feb 11 #PHP
php数组指针函数功能及用法示例
Feb 11 #PHP
PHP实现单例模式建立数据库连接的方法分析
Feb 11 #PHP
php-7.3.6 编译安装过程
Feb 11 #PHP
PHP实现Markdown文章上传到七牛图床的实例内容
Feb 11 #PHP
You might like
星际中的相关伤害
2020/03/04 星际争霸
PHP合并静态文件详解
2014/11/14 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
Jquery easyui 实现动态树
2015/11/17 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
python多线程用法实例详解
2015/01/15 Python
python数据结构之图的实现方法
2015/07/08 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python底层封装实现方法详解
2020/01/22 Python
Python列表解析操作实例总结
2020/02/26 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
电台编导求职信
2014/05/06 职场文书
给校长的建议书200字
2014/05/16 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
个人授权委托书模板
2014/09/14 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
Nginx跨域问题解析与解决
2022/08/05 Servers