php+jquery+ajax無刷新圖片上傳裁切，模擬flash頭像上傳實例

博客已轉移到：http://blog.phpue.com/Article/index/id/13.html

   這幾天自己在寫一個cms.之前在用到圖片上傳裁切的時候總是用的flash的,或者是swfupload之類的。用的還不熟練，所以今天就用ajax做一個圖片上傳裁切的實例.個人感覺還不錯,現在就分享出來.我用的是ThinkPHP的框架,先將用到的插件分享出來.demo下載

   ajaxfileupload.js    ajax上傳文件的插件。

   jquery.imgareaselect.min.js        圖片裁切插件

   jquery.min.js        jquery框架文件

   先寫好需要的樣式

對應的html代碼

<input type="text" name="" id="pics" /><a href="#" class="OpenDialog">上傳圖片</a>
<div class="dialog" style="position: fixed;bottom:200px;left:50px;background: #ffffff;width:600px;height:320px;z-index:2000">
<div class="span12" style="padding:0 20px;">
<div class="jc-demo-box">
<img src="./images/pics_default.png" id="target" alt="圖片預覽" style="float:left;width:320px;height:240px;margin-right:20px;"/>
<div id="preview-pane" style="float:left;">
<div class="preview-container" style="margin-bottom: 10px;">
<img src="./images/pics_default.png" class="jcrop-preview" alt="Preview" />
</div>
<form action="__URL__/uploadsImg" class="ajaxPic" enctype="multipart/form-data" method="post">
<input type="button" value="選擇圖片" onclick="document.all.tt.click()" class="btn btn-info"/>
<INPUT TYPE="file" name="tt" style="display:none" id="tt">
<input type="submit" value="提交上傳"  class="btn btn-danger"/>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
<form action="__URL__/cutImg" method="post" class="ajaxCut" style="padding-top:10px;padd-bottom:20px;">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="x1" name="x1" />
<input type="hidden" id="y1" name="y1" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" name="filename" value="">
<input type="submit" value="完成裁切" class="btn btn-primary"/>
<input type="button" value="取消" class="btn btn-default closeDialog"/>
</form>
</div>

樣式css

div.clearfix{clear:both;}
div.dialog{display:none;}
div.modal-backdrop{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1030;background-color: #000;opacity: 0.5;}
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -240px;
padding: 6px;
background-color: white;
}
#preview-pane .preview-container {
width: 160px;
height: 120px;
overflow: hidden;
}
div.jcrop-holder{
width:400px;
}

ok，然后開始第一步，要先實現彈窗效果。點擊上傳按鈕彈出class=dialog上傳圖片的div。

$('.OpenDialog').click(function(){
$('div.dialog').show();
$('<div class="modal-backdrop"></div>').appendTo('body');
return false;
})

 第二步是點擊上傳文件就上傳并且無刷新替換到預覽區域的圖片地址

$('form.ajaxPic').submit(function(){
$.ajaxFileUpload({
url: $(this).attr('action'),
secureuri: false,
fileElementId: 'tt',
dataType: 'json',
success: function(ajax){
var img1 = $('div.jc-demo-box').find('img');
var $pimg = $('.jcrop-preview');
var $pcnt = $('#preview-pane .preview-container'), xsize = $pcnt.width(), ysize = $pcnt.height();
var $preview = $('#preview-pane');
img1.attr('src', ajax.data);
$('input[type=hidden][name=filename]').val(ajax.data);
$('<img/>').attr('src', ajax.data).load(function(){
$('#target').css({
width: this.width,
height: this.height,
})
$pimg.css({
width: this.width,
height: this.height,
})
})
$('#target').imgAreaSelect({
aspectRatio: '160:120',
onSelectChange: preview
});
function preview(img, selection){
var scaleX = 160 / selection.width;
var scaleY = 120 / selection.height;
var width = $('#target').width();
var height = $('#target').height();
$('.jcrop-preview').css({
width: Math.round(scaleX * width) + 'px',
height: Math.round(scaleY * height) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x').val(selection.x1);
$('#y').val(selection.y1);
$('#x1').val(selection.x2);
$('#y1').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
}
})
return false;
})

這里用到了ajax上傳的插件，在上傳成功以后，則加載裁切程序。aspectRatio: '160:120',這部分是裁切區域的比例，如果沒有指定則可以自由裁切。

最后在點擊完成裁切以后，則隱藏彈出框并且把地址帶回。

//ajax上傳裁切
$('form.ajaxCut').submit(function(){
var thumbnail = $('.img-thumbnail');
var dialog = $('.dialog');
$.ajax({
url: $(this).attr('action'),
type: 'post',
data: $(this).serialize(),
dataType: 'json',
success: function(ajax){
thumbnail.attr('src', ajax.data);
$('#pics').val(ajax.data);
$('input[type=button].closeDialog').trigger('click');
}
})
return false;
})

圖片上傳對應的php代碼

function uploadsImg(){
import('ORG.Net.UploadFile');
$upload = new UploadFile();// 實例化上傳類
$upload->maxSize  = 3145728 ;// 設置附件上傳大小
$upload->allowExts  = array('jpg', 'gif', 'png', 'jpeg');// 設置附件上傳類型
$savePath='./uploads/'.date('Ymd').'/';
if (!file_exists($savePath)){
if (!mkdir($savePath)){
$this->ajaxReturn('創建文件夾'.$savePath.'失敗,請檢查uploads文件夾權限是否為777');
}
}
$upload->savePath =$savePath;  // 設置附件上傳目錄
if(!$upload->upload()) {// 上傳錯誤提示錯誤信息
$info=$upload->getErrorMsg();
}else{// 上傳成功 獲取上傳文件信息
$info =  $upload->getUploadFileInfo();
}
if (!is_array($info)){
$this->ajaxReturn($info);
}else{
import('ORG.Net.Image');
$img=new Image($info[0]['savepath'].$info[0]['savename'],1,'320','240',$info[0]['savepath'].'s_'.$info[0]['savename']);
$img->outimage();
$picRealPath=J(__ROOT__.'/'.$img->getImageName());
$this->ajaxReturn($picRealPath);
}
}

這里用到的就是ThinkPHP自帶的圖片上傳，但是在上傳以后，為了不讓太大，太小或者不規則的圖影響到裁切時候的效果，所以適當對圖片做了下裁切。然后將圖片上傳的地址返回給ajax

圖片裁切代碼

function cutImg(){
$dfile='./uploads/'.date('Ymd').'/';
if(!file_exists($dfile)){
if (!mkdir($dfile)){
$this->ajaxReturn('創建文件夾'.$dfile.'失敗,請檢查uploads文件夾權限是否為777');
}
}
$sfile=$_REQUEST['filename'];
$sfile=str_replace(__ROOT__, '.', $sfile);
$file_tmp=explode('/', $sfile);
$file=$file_tmp[count($file_tmp)-1];
$x=$_REQUEST['x'];
$y=$_REQUEST['y'];
$x1=$_REQUEST['x1'];
$y1=$_REQUEST['y1'];
$width=$_REQUEST['w'];
$height=$_REQUEST['h'];
import('ORG.Net.Image');
$value1=$x.','.$y;
$value2=$width.','.$height;
$dfile=$dfile.'small_'.$file;
$img=new Image($sfile,2,$value1,$value2,$dfile);
$img->outimage();
$filename=$img->getImageName();
$filename=J(__ROOT__.'/'.$filename);
$this->ajaxReturn($filename);
}

圖片裁切就是通過坐標以及裁切時候的大小，返回到php的類里去完成最后的裁切。