thinkphp的同步上传图片和异步上传图片

Posted 2021-02-05 cl94

同步：

前台页面：

        <div class="form-div"> 
            <form action="{:url(‘index/i/edit_head_img_cl‘)}" enctype="multipart/form-data" method="post">
                <input type="file" name="image" accept="image/gif, image/jpg ,image/png"/> <br> 
                <p style="color:red">仅支持不大于5m，后缀为jpg,png,gif的图片</p>
                <input type="submit" value="上传" /> 
            </form> 
        </div>

 

后台页面：

    //处理头像修改
    public function edit_head_img_cl(){

      //检验用户是否登陆，并获取user_id
      if($this->check_log[‘ok‘] == ‘-1‘){
        $this->error($this->check_log[‘error‘]);
      }
      $user_id = $this->check_log[‘id‘];
      echo ‘1‘;
      // 获取表单上传文件 例如上传了001.jpg
      $file = request()->file(‘image‘);
      echo ‘2‘;
      // 移动到框架应用根目录/public/uploads/ 目录下
      if($file){
          $info = $file->validate([‘size‘=>5242880,‘ext‘=>‘jpg,png,gif‘])->move(‘static/uploads/‘);
          if($info){
              // 成功上传后 获取上传信息
              // 输出 jpg
/*              echo $info->getExtension();
              // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
              echo $info->getSaveName();
              // 输出 42a79759f284b767dfcb2a0197904287.jpg
              echo $info->getFilename(); */
              $ing_url = $info->getSaveName();
              //把url写进头像
              $res = UserDB::update([‘id‘=>$user_id,‘head_img‘=>$ing_url]);
              if(!$res){
                echo ‘系统故障，更换头像失败‘;
              }else{
                echo ‘<script type="text/javascript">parent.location.reload();</script>‘;
              }


          }else{
              // 上传失败获取错误信息
              echo $file->getError();
          }
      }else{
        echo request()->post(‘image‘);
      }
    }

 

 

 

 

 

 

 

 

 

异步：

前台页面：

                            <tr>
                                <td>头像（异步上传）：</td>
                                <td>
                                    {if $user.head_img == ‘‘}
                                        <img src="__STATIC__/uploads/{$site_setup.default_img}" style="width: 50px;height: 50px;" class="head-img">
                                    {else/}
                                        <img src="__STATIC__/uploads/{$user.head_img}" style="width: 50px;height: 50px;" class="head-img">
                                    {/if}
                                </td>
                                <td>
                                    <input type="file" multiple="multiple" id="inputfile" name="" class="photo">

                                    
                                </td>
                            </tr>

    //图片异步上传
    $("#inputfile").change(function(){
        console.log($(this).val());
        /*alert(1);*/
        var file = $(‘#inputfile‘)[0].files[0];
        var data = new FormData();
    /*    console.log($(‘#inputfile‘));*/
        data.append(‘image‘, file);

         $.ajax({
            url:"{:url(‘index/i/edit_head_img_cl_yb‘)}", /*去过那个php文件*/
            type:‘POST‘,  /*提交方式*/
            data:data,
            dataType: "json",
            cache: false,
            contentType: false,        /*不可缺*/
            processData: false,         /*不可缺*/
            mimeType: "multipart/form-data",
            success:function(data){  
                if(data.ok == ‘1‘){
                    //把头像换成新的
                    $(".head-img").attr("src","__STATIC__/uploads/"+data.url);
                }      
                alert(data.message);
            },
            error:function(data){
                alert(‘上传出错‘);
            }
        });    
    });

 

后台页面：

    //处理头像修改(异步)
    public function edit_head_img_cl_yb(){

      //检验用户是否登陆，并获取user_id
      if($this->check_log[‘ok‘] == ‘-1‘){
        return [‘ok‘=>‘-1‘,‘message‘=>$this->check_log[‘error‘]];
      }
      $user_id = $this->check_log[‘id‘];

      // 获取表单上传文件 例如上传了001.jpg
      $file = request()->file(‘image‘);

      // 移动到框架应用根目录/public/uploads/ 目录下
      if($file){
          $info = $file->validate([‘size‘=>5242880,‘ext‘=>‘jpg,png,gif‘])->move(‘static/uploads/‘);
          if($info){
              // 成功上传后 获取上传信息
              // 输出 jpg
/*              echo $info->getExtension();
              // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
              echo $info->getSaveName();
              // 输出 42a79759f284b767dfcb2a0197904287.jpg
              echo $info->getFilename(); */
              $ing_url = $info->getSaveName();
              //把url写进头像
              $res = UserDB::update([‘id‘=>$user_id,‘head_img‘=>$ing_url]);
              if(!$res){
                return [‘ok‘=>‘-1‘,‘message‘=>‘系统故障，更换头像失败‘];

              }else{
                 return [‘ok‘=>‘1‘,‘message‘=>‘上传成功！‘,‘url‘=>$ing_url];
              }


          }else{
              // 上传失败获取错误信息
              return [‘ok‘=>‘-1‘,‘message‘=>$file->getError()];
          }
      }else{
        return [‘ok‘=>‘-1‘,‘message‘=>‘没有接收到图片！‘];
      }
    }