zoukankan      html  css  js  c++  java
  • PHP+JQUERY+AJAX上传、裁剪图片

    PHP部分

      

    /*图片上传*/
        public function upload1(){
            $file = $_FILES['file'];
            $upload = new \Think\Upload();// 实例化上传类
            $upload->maxSize = 2*1024*1024;
            $upload->rootPath  = './Uploads/'; // 设置附件上传根目录
            $upload->savePath  = 'Pc/headerimg/'; // 设置附件上传(子)目录
            $info = $upload->uploadOne($file);
            $infourl='./Uploads/'.$info['savepath'].$info['savename'];
            $image = new \Think\Image();
            $image->open($infourl);//将图片裁剪为400x400并保存为corp.jpg
            $width = $image->width(); // 返回图片的宽度
            $height = $image->height(); // 返回图片的高度
            $iw = $ih = 440;
            if($iw>$width){
                $iw = $width;
            }
            if($ih>$height){
                $ih = $height;
            }
            if($width>440 || $height>440){
                $image->thumb($iw, $ih,\Think\Image::IMAGE_THUMB_CENTER)->save($infourl);
            }
            exit(json_encode($info));
        }
        /*剪切图片上传*/
        public function uploadImgCut(){
            if(IS_POST){
                $ileft=$_POST['ileft'];
                $itop=$_POST['itop'];
                $iw=$_POST['iw'];
                $ih=$_POST['ih'];
                $jqimg=$_POST['jqimg'];
                $image = new \Think\Image();
                $image->open($jqimg);
                $width = $image->width(); // 返回图片的宽度0
                $height = $image->height(); // 返回图片的高度
                if($iw>$width){
                    $iw = $width;
                    $ileft = 0;
                }
                if($ih>$height){
                    $ih = $height;
                    $itop = 0;
                }
                if(0 == $iw && 0 == $ih){
                    exit('{"state":false,"msg":"图片太小"}');
                    exit();
                }
    
                $image->crop($iw,$ih,$ileft,$itop)->save($jqimg);
    
               $data['headimgurl']=$jqimg;
    
                $sessval=session('userInfo');
                $id=$sessval['id'];
                    if($id){
                        if(M('vip')->where(array('id'=>$id))->save($data)){
                            $bHtml = '{"state":true,"url":"'.$jqimg.'","msg":"图片上传成功"}';
                             exit($bHtml);
                        }else{
                            exit('{"state":false,"msg":"数据库保存失败"}');
                        }
                    } else {
                        exit('{"state":false,"msg":"用户未登录"}');
                    }
    
    
            }
            exit('{"state":false,"msg":"非法提交"}');
        }

    HTML部分
    <div class="p-content">
    
        <div class="upload-pic-box">
    
                     <span class="upload-left">
    
                            <div class="box">
    
                             <i class="cut" id="cut" style="display:none;"></i>
    
                                <!--默认<img src="images/uphoto1.png" alt="" style="" />-->
    
                             <img src="__IMG__/uphoto1.png" alt="" style="" id="imgPrototype"/>
    
                            </div>
    
                            <input type="hidden" value="" id="pic_img"/>
    
                            <a class="upload-btn" href="javascript:;">
    
                                <cite>点击您要上传的头像</cite>  
    
                               <p><input type="file" name = "file" id = "file1" onchange="uploadCutImg('imgPrototype','file1','pic_img')"></p>
    
                            </a>                    
    
            </span>
    
                     <span class="upload-right" id='divpicview' class='divpre'>
    
                         <div class="box">
    
                                <img src="__IMG__/uphoto2.png" alt="" id="imgView" />
    
                            </div>
    
                            <span class="text">尺寸:340*340像素</span><br/>
    
                <a class="upload-btn" style="cursor:pointer;display:none;" id="doImgCut">
    
                            <cite>确定</cite>
    
                            </a>
    
                     </span>
    
                </div>
    
            </div>

    AJAX部分下一章...

        

  • 相关阅读:
    0514JS基础:操作document对象、事件、this
    Java 多态
    Java 抽象类和接口
    Vue中v-for属性
    Vue基础语法
    Vue 自定义按键修饰符,自定义指令,自定义过滤器
    ES6 剩余参数
    ES6 箭头函数
    ES6 解构赋值
    ES6 变量声明 var let const的区别
  • 原文地址:https://www.cnblogs.com/finnlee/p/4903793.html
Copyright © 2011-2022 走看看