Think PHP 5 Ajax图片上传

本文介绍了如何使用HTML和jQuery构建一个前端表单,允许用户上传商品logo,通过AJAX与后端PHP接口进行通信,成功后展示文件名并制作缩略图。后端通过处理文件并返回响应,确保了图片上传和显示的完整流程。
摘要由CSDN通过智能技术生成

1.先写出前端页面
  (1).Html代码

<form>
  <div class="form-group">
      <label>商品logo:</label>
      <input type="file" class="form-control logo" accept="image/gif,image/jpeg,image/x-png">
      <span></span>
  </div>
  <button type="button" class="btn btn-primary">添加</button>
</form>

(2).jQuery代码

//给表单一个改变事件
    $('.logo').change(function(event) {
      var formData = new FormData();
      formData.append("file", $(this).get(0).files[0]);
      $.ajax({
        //请求地址
        url:"{:url('test/Seek/logo')}",
        //请求方式必须是post
        type:'POST',
        dataType:"json",
        data:formData,
        cache: false,
        contentType: false, //不可缺
        processData: false, //不可缺
        success:function(data){
        if (data.code == 1){
          //如果不明白为什么要替换标签 首先可以打印一下 data.phone 可以试试有没有数据
          //如果有 则替换标签 目的是为了 ajax上传时接值
          //此步骤也是将后端上传后的文件名显示在页面上
          $(".logo").next().html("<font class='goods_logo'>"+data.goods_logo+"</font>")
        }
      }
    });
  });

(3).效果如下

2.后端代码 

public function logo(){
    //获取前端文件
    $file = $this->request->file('file');
    //判断文件是否为空
    if (!empty($file)) {
      // 移动到框架应用根目录/public/uploads/ 目录下,并且验证大小与类型
      $info = $file->validate(['size' => 1048576, 'ext' => 'jpg,png,gif'])->rule('uniqid')->move(ROOT_PATH . 'public' . DS . 'uploads');
      if ($info) {
        // 成功上传后 获取上传信息
        $goods_logo = '/uploads/'.$info->getSaveName();
        //此步骤为缩略图制作
        $image = \think\Image::open(".".$goods_logo);
        // 按照原图的比例生成一个最大为150*150的缩略图并保存为thumb.png
        $image->thumb(150, 150)->save(".".$goods_logo);
      } else {
        // 上传失败获取错误信息
        $file->getError();
      }
    } else {
      $goods_logo = '';
    }
    //判断一下返回相对应的三要素
    if($goods_logo !== ''){
      return ['code'=>1,'msg'=>'成功','goods_logo'=>$goods_logo];
    }else{
      return ['code'=>404,'msg'=>'失败','goods_logo'=>''];
    }
  }

 3.上传成功后效果如下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值