最近使用laravel的时，候想实现用户上传头像，并自定义区域裁剪的功能；查了一些资料基本上都是Jcorp+uplodify+PHP的方法实现的；于是做了demo，也基本上实现了功能，郁闷的事，在结合laravel的时候uplodify上传302错误码，按照网页的方法传递session_id,也不见生效，后来改用ajaxupload完美实现了这个功能，特此记录：
final效果图：
代码：
/**
* 上传头像
*/
public function upload(){
$path = app_path()."/../public/avatar/";
$tmpath="/avatar/";
if(!empty($_FILES)){
//得到上传的临时文件流
$tempFile = $_FILES['myfile']['tmp_name'];
//允许的文件后缀
$fileTypes = array('jpg','jpeg','gif','png');
//得到文件原名
$fileName = iconv("UTF-8","GB2312",$_FILES["myfile"]["name"]);
$fileParts = pathinfo($_FILES['myfile']['name']);
//最后保存服务器地址
if(!is_dir($path)){
mkdir($path);
}
if (move_uploaded_file($tempFile,$path.$fileName)){
$info= $tmpath.$fileName;
$status=1;
$data=array('path'=>app_path(),'file'=> $path.$fileName);
}else{
$info=$fileName."上传失败！";
$status=0;
$data='';
}
echo $info;
}
}
/**
* @裁剪头像
*/
public function cutPic(){
if(Request::ajax()){
$path="/avatar/";
$targ_w = $targ_h = 150;
$jpeg_quality = 100;
$src = Input::get('f');
$src=app_path().'/../public'.$src;//真实的图片路径
$img_r = imagecreatefromjpeg($src);
$ext=$path.time().".jpg";//生成的引用路径
$dst_r = ImageCreateTrueColor( $targ_w,$targ_h );
imagecopyresampled($dst_r,$img_r,Input::get('x'),Input::get('y'),$targ_w,$targ_h,Input::get('w'),Input::get('h'));
$img=app_path().'/../public'.$ext;//真实的图片路径
if(imagejpeg($dst_r,$img,$jpeg_quality)){
$arr['status']=1;
$arr['data']=$ext;
$arr['info']='裁剪成功！';
echo json_encode($arr);
}else{
$arr['status']=0;
echo json_encode($arr);
}
exit;
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title>register</title>
{{HTML::script('js/jquery.js')}}
{{HTML::script('js/ajaxupload.js')}}
{{HTML::script('js/jquery.Jcrop.min.js')}}
{{HTML::style("css/index.css")}}
{{HTML::style("css/jquery.Jcrop.css")}}
</head>
<style type="text/css">
.form{padding: 15px;}
.jcorp-holder{position: relative;}
#frm{margin-bottom:0px; }
#frm input{margin:15px 0; }
.pic-display{display: block;margin: 20px;width: auto;}
#thum{width: auto;}
/*#thum img{width: auto;height: auto;display: block;}*/
#preview-pane{
width:150px;
height: 150px;
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right:-170px;
padding: 6px;
border: 1px rgba(0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-Box-shadow: 1px 1px 5px 2px rgba(0,0.2);
-moz-Box-shadow: 1px 1px 5px 2px rgba(0,0.2);
Box-shadow: 1px 1px 5px 2px rgba(0,0.2);
}
#preview-pane .preview-container {
width: 150px;
height: 150px;
overflow: hidden;
padding: 0;
}
.jcrop-preview{padding: 0;margin: 0}
</style>
<body>
<div class="main">
<div class="top_nav">
<div class="top_nav_l"> <b class="index"></b>网站后台 <span>/</span><a href="/articles">首页</a><span>/</span>修改头像</div>
<div class="top_nav_r"> {{link_to_route('logout','退出')}}</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="form">
<h3>头像上传：</h3>
<form id="frm" action="#" method="post">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="f" name="f" />
<input id='upload' name="file_upload" type="button" value='上传' class='btn btn-large btn-primary'>
<input type="button" name="btn" value="确认裁剪" class="btn" />
</form>
<div class="info"></div>
<div class="pic-display"></div><div class="text-info"></div>
</div>
</div>
</div>
<script>
var url="http://"+window.location.host;
var g_oJCrop = null;
//异步上传文件
new AjaxUpload("#upload",{
action: url+'/user/upload',type:"post",name:'myfile',data: {},onSubmit: function(file,ext) {
if($(".text-info img").length>0){
$(".info").html("<div style='color:#E3583B;margin:5px;'>文件已经裁剪过！</div>");return false;
}
$(".info").html("<div style='color:#008000;margin:5px;'>上传中...</div>");
},onComplete: function(file,response) {
if(g_oJCrop!=null){g_oJCrop.destroy();}
//生成元素
$(".pic-display").html("<div class='thum'><img id='target' src='"+response+"'/></div>");
//初始化裁剪区
$('#target').Jcrop({
onChange: updatePreview,onSelect: updatePreview,aspectRatio: 1
},function(){
g_oJCrop = this;
var bounds = g_oJCrop.getBounds();
var x1,y1,x2,y2;
if(bounds[0]/bounds[1] > 150/150)
{
y1 = 0;
y2 = bounds[1];
x1 = (bounds[0] - 150 * bounds[1]/150)/2;
x2 = bounds[0]-x1;
}
else
{
x1 = 0;
x2 = bounds[0];
y1 = (bounds[1] - 150 * bounds[0]/150)/2;
y2 = bounds[1]-y1;
}
g_oJCrop.setSelect([x1,y2]);
//顺便插入略缩图
$(".jcrop-holder").append("<div id='preview-pane'><div class='preview-container'><img class='jcrop-preview' src='"+response+"' /></div></div>");
});
//传递参数上传
$("#f").val(response);
//更新提示信息
$(".info").html("<div style='color:#008000;margin:5px;'>准备裁剪。。。</div>");
}
});
//更新裁剪图片信息
function updatePreview(c) {
if (parseInt(c.w) > 0){
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
var bounds = g_oJCrop.getBounds();
var rx = 150 / c.w;
var ry = 150 / c.h;
$('.preview-container img').css({
width: Math.round(rx * bounds[0]) + 'px',height: Math.round(ry * bounds[1]) + 'px',marginLeft: '-' + Math.round(rx * c.x) + 'px',marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
}
//表单异步提交后台裁剪
$("input[name=btn]").click( function(){
var w=parseInt($("#w").val());
if(!w){
w=0;
}
if(w>0){
$.post(url+'/user/cutPic',{'x':$("input[name=x]").val(),'y':$("input[name=y]").val(),'w':$("input[name=w]").val(),'h':$("input[name=h]").val(),'f':$("input[name=f]").val()},function(data){
if(data.status==1){
$(".pic-display").remove();
$(".info").html("<div style='color:#008000;margin:10px 5px;'>裁剪成功!</div>")
$(".text-info").html("<img src='"+data.data+"'>");
$("input[name=btn]").hide();
}
},'json');
}else{
$(".info").html("<div style='color:#E3583B;margin:5px;'>亲！还没有选择裁剪区域哦！</div>");
}
});
</script>
</body>
</html>