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

这里有句代码展示有问题,源码如下:
在这里插入图片描述

要点
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一起提交到后台中去。
    在这里插入图片描述
  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>

      

内容版权声明:除非注明,否则皆为本站原创文章。

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