zoukankan      html  css  js  c++  java
  • thinkphp的同步上传图片和异步上传图片

    同步:

    前台页面:

            <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=" 50px;height: 50px;" class="head-img">
                                        {else/}
                                            <img src="__STATIC__/uploads/{$user.head_img}" style=" 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'=>'没有接收到图片!'];
          }
        }
  • 相关阅读:
    JS获取当前网页大小以及屏幕分辨率等
    JS获取浏览器信息及屏幕分辨率
    vue中获取客户端IP地址(不需要额外引入三方文件)
    vue事件修饰器
    export,import ,export default的区别
    Vue中动态添加多个class
    Vue中通过鼠标移入移出来添加或取消class样式(active)
    restapi(5)- rest-mongo 应用实例:分布式图片管理系统之一,rest 服务
    restapi(4)- rest-mongo : MongoDB数据库前端的httpserver
    restapi(3)- MongoDBEngine : MongoDB Scala编程工具库
  • 原文地址:https://www.cnblogs.com/cl94/p/10311855.html
Copyright © 2011-2022 走看看