thinkphp3.2頭像上傳即時顯示並擷取
ajax無重新整理上傳，不能上傳type=file的檔案或圖片，使用iframe。
後臺返回圖片路徑，並展示在特定位置。
利用jcrop剪下圖片，獲取xy座標，和擷取的寬度和高度，傳給php，並實現相應操作。
下面上一些程式碼。
<form id="submit" action="{:U('User/up_photo')}" enctype="multipart/form-data" target="upframe" method="post">
<input type="file" name="TK_eFile" class="TK_eFile" id="TK_eFile" onchange="upload()">
<input type="button" class="TK_eBtn" value="瀏覽圖片" onclick="document.getElementById('TK_eFile').click()">
</form>
<iframe id="upframe" name="upframe" style="display:none"></iframe>
function upload(){
var url="__URL__/up_photo";
$('#submit').submit();
}
//上傳頭像
public function up_photo(){
$upload = new \Think\Upload();// 例項化上傳類
$upload->maxSize = 3145728 ;// 設定附件上傳大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳型別
$upload->rootPath = './Uploads/'; // 設定附件上傳根目錄
$upload->savePath = ''; // 設定附件上傳（子）目錄
$upload->thumbType = 0;// 縮圖生成方式 1 按設定大小擷取 0 按原圖等比例縮略
// 上傳檔案
$info = $upload->upload();
$lujing=__ROOT__."/Uploads/".$info['TK_eFile']['savepath'].$info['TK_eFile']['savename'];
//echo $lujing;
//$this->ajaxReturn(array("data"=>$lujing,"info"=>$lujing,"status"=>1));
echo '<script>parent.add("'.$lujing.'")</script>';
}
function add(data){
$('#target').attr("src",data);
$('.jcrop-preview').attr("src",data);
$('#ximg').attr("value",data);
}
上面是無重新整理上傳主要程式碼。
<script>
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
};
});
$('.TK_eSave').click(function(){
var url="__URL__/photo_crop";
$('#pic').submit();
// $.post($('#pic').attr('action'),$('#pic').serialize(),function(data) {
// alert(data);
// //$('#pic').attr('send','on');
// if(!data.status) {alert(data.info); _loading_box.remove(); }
// else location.reload();
// },'json');
});
}
</script>
<script src="__PUBLIC__/js/jquery.Jcrop.js"></script>
<div class="TK_eHeadCont">
<div class="TK_eHeadC" id="image"><img src="" id="target" height=300 width=300 /></div>
<div id="preview-pane">
<div class="preview-container">
<img src="" class="jcrop-preview" alt="Preview" />
</div>
</div>
</div>
<form id="pic" action="{:U('User/photo_crop')}" 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="ximg" name="ximg" />
</form>