准备材料
THINKPHP
jQuery表单插件
cropper 裁剪插件
思路： 利用THINKPHP上传文件类与图片裁剪类，前台想办法组合参数给后台 那怎么样可以异步提交文件呢 关键就是 jquery表单插件了
后台准备
前台准备
即时预览图片 (不会上传文件)
/**
*从file域获取本地图片url
*/
functiongetFileUrl(sourceId){
varurl;
if(navigator.userAgent.indexOf("MSIE")>=1){//IE
url=document.getElementById(sourceId).value;
}elseif(navigator.userAgent.indexOf("Firefox")>0){//Firefox
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}elseif(navigator.userAgent.indexOf("Chrome")>0){//Chrome
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
returnurl;
}
/**
*将本地图片显示到浏览器上
*/
functionpreImg(sourceId,targetId){
varurl=getFileUrl(sourceId);
varimgPre=document.getElementById(targetId);
imgPre.src=url;
}
//触发事件调用
preImg(this.id,'imgPre');
我的实现代码
前端
上传新头像
选择文件
未选择文件
支持格式：jpg、jpeg、png、gif格式，大小不超过5M
确定重新上传
温馨提示:
禁止上传违反中华人民共和国相关法律的照片，若上传，相关
法律后果有个人承担
//头像上传裁剪start
$(function(){
//打开或关闭弹出层
$(document).ready(function(){
$('.toux').click(function(){
$('.txsc').fadeIn(300);
})
$('.txsc.close').click(function(){
$('.txsc').fadeOut(300);
})
});
/**
*从file域获取本地图片url
*/
functiongetFileUrl(sourceId){
varurl;
if(navigator.userAgent.indexOf("MSIE")>=1){//IE
url=document.getElementById(sourceId).value;
}elseif(navigator.userAgent.indexOf("Firefox")>0){//Firefox
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}elseif(navigator.userAgent.indexOf("Chrome")>0){//Chrome
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
returnurl;
}
/**
*将本地图片显示到浏览器上
*/
functionpreImg(sourceId,targetId){
varurl=getFileUrl(sourceId);
varimgPre=document.getElementById(targetId);
imgPre.src=url;
}
//先清除原来的图片
$("#imgOne").click(function(){
$('.avatar_img').html('');
})
//点击重新上传相当于点击了上传文件
$("#resetUplode").click(function(){
$("#imgOne").click();
})
$("#imgOne").live('change',function(){
preImg(this.id,'imgPre');
//图片裁剪初始化
$('.container>img').cropper({
aspectRatio:16/9,
rotateControls:true,
zoomable:true,
crop:function(data){
//$('.avatar-data').
varx=data.x;
vary=data.y;
varwidth=data.width;
varheight=data.height;
varavatarData='{"x":'+x+',"y":'+y+',"height":'+height+',"width":'+width+',"rotate":0}';
$('.avatar-data').val(avatarData);
}
});
});
//放大
$("#enlarge").click(function(){
$('.container>img').cropper('zoom',+0.1);
})
//缩小
$("#shrink").click(function(){
$('.container>img').cropper('zoom',-0.1);
})
/*异步上传图片*/
$("#avatar_sumbit").click(function(){
$('#avatar_form').ajaxSubmit(function(data){
//console.log(data);
//替换当前图片的路径
$(".toux").attr('src',data.crop_path);
//接收图片ID后，放到当前页面中
$("input[name='head_img']").val(data.pic_id);
//关闭当前弹出层
$('.txsc').fadeOut(300);
});
returnfalse;
});
});
//头像上传裁剪end
PHP端
控制器中的方法
publicfunctionajaxAvatar(){
$avatarArr=json_decode(I('post.avatar_data'),1);
$picModel=D('picture');
$info=$picModel->ajaxUpload($_FILES,$avatarArr);
$this->ajaxReturn($info);
}
图片model层代码
/**
*图片上传
*@paramarray$files要上传的图片列表(通常是$_FILES数组)
*@paramarray$setting图片上传配置
*@paramstring$driver图片驱动名称
*@paramarray$config图片驱动配置
*@returnarray图片上传成功后的信息
*/
publicfunctionupload($files,$setting,$driver='Local',$config=null){
/*上传文件*/
$Upload=new\Think\Upload($setting,$driver,$config);
$info=$Upload->upload($files);
/*设置文件保存位置*/
$this->_auto[]=array('location','Ftp'===$driver?1:0,self::MODEL_INSERT);
if($info){//文件上传成功，记录文件信息
foreach($infoas$key=>&$value){
/*已经存在文件记录*/
if(isset($value['id'])&&is_numeric($value['id'])){
$value['path']=substr($setting['rootPath'],1).$value['savepath'].$value['savename'];//在模板里的url路径
continue;
}
$value['path']='.'.substr($setting['rootPath'],1).$value['savepath'].$value['savename'];//在模板里的url路径
/*记录文件信息*/
if($this->create($value)&&($id=$this->add())){
$value['id']=$id;
}else{
//TODO:文件上传成功，但是记录文件信息失败，需记录日志
unset($info[$key]);
}
}
return$info;//文件上传成功
}else{
$this->error=$Upload->getError();
returnfalse;
}
}
/*更新或添加*/
publicfunctionupdate($data)
{
$data=$this->create($data);
if(!$data){returnfalse;}
returnempty($data['id'])?$this->add():$this->save();
}
/**
*异步上传并裁剪图片
*@param$file$_FILES文件信息
*@param$pic要裁剪信息
*@param$pre裁剪后图片前缀
*@returnarray图片裁剪之后的地址原图片地址图片ID
*/
publicfunctionajaxUpload($file,$picArr,$pre='crop'){
$config=array(
'maxSize'=>3145728,
'rootPath'=>'./Uploads/Picture/',
'savePath'=>'',
'saveName'=>array('uniqid',''),
'exts'=>array('jpg','gif','png','jpeg'),
'autoSub'=>true,
'subName'=>array('date','Y-m-d'),
);
//可以直接调用系统的上传类
$info=$this->upload($file,$config);
//截图略缩图
$image=new\Think\Image();
$image->open($info['avatar_file']['path']);
$crop_path='./Uploads/Picture/'.$info['avatar_file']['savepath'].$pre.'_'.$info['avatar_file']['savename'];
$image->crop($picArr['width'],$picArr['height'],$picArr['x'],$picArr['y'])->save($crop_path);
//原图片路径
$info['org_path']=$info['avatar_file']['path'];
//裁剪后图片路径
$info['crop_path']=$crop_path;
//图片ID
$info['pic_id']=$info['avatar_file']['id'];
return$info;
}
