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 远程文件管理,可以给表格排序,遍历目录,时间排序
Aug 07 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
Nov 11 PHP
10个超级有用值得收藏的PHP代码片段
Jan 22 PHP
php实现根据词频生成tag云的方法
Apr 17 PHP
ThinkPHP里用U方法调用js文件实例
Jun 18 PHP
Yii视图CGridView列表用法实例分析
Jul 12 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
Sep 09 PHP
PHP中功能强大却很少使用的函数实例小结
Nov 10 PHP
PHP 类与构造函数解析
Feb 06 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
Mar 02 PHP
Laravel中任务调度console使用方法小结
May 07 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
Jul 15 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
PHP中路径问题的解决方案
2006/10/09 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
使用angular写一个hello world
2015/01/23 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
详解Django中的过滤器
2015/07/16 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python实现俄罗斯方块游戏
2020/03/25 Python
flask-restful使用总结
2018/12/04 Python
python提取log文件内容并画出图表
2019/07/08 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python print不能立即打印的解决方式
2020/02/19 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
反对邪教标语
2014/06/30 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
电影建党伟业观后感
2015/06/01 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Python字典和列表性能之间的比较
2021/06/07 Python
vue使用element-ui按需引入
2022/05/20 Vue.js
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技