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>

版权声明：本文为博主原创文章，未经博主允许不得转载。