PHP+JQUERY+AJAX上传、裁剪图片

时间:2024-12-15 21:33:49

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="data: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部分下一章...