file API+JCrop 选择、裁剪并上传头像

标签：

　　file API，直接读取本地文件，绕过了后台处理再返回前台的过程，使编程更简单。fileAPI和JCrop的结合使用上传头像。

　　1、html部分

　　<input id="demo" type="file" onchange="showPic();"/>

　　<img id="avatar" src="">

　　2、fileAPI预览图片(jquery)

　　<script type="text/javascript">

　　function showPic(){

　　　　var file = $(‘#demo‘)[0].files[0];

　　　　var reader = new FileReader();

　　　　reader.onload = function(){//加载成功后会触发。reader.onloadend加载成功或失败都会触发

　　　　　　$(‘#avatar‘).attr(‘src‘,reader.result);

　　　　}

　　　　reader.readAsDataURL(file);

　　}

　　</script>

　　3、JCrop截取图片工具

　　<link rel="stylesheet" href="./JCrop/css/jquery.Jcrop.css" />

　　<script src="./jquery-1.8.3.min.js" type="text/javascript"></script>

　　//1.8.2版本支持的很好，1.11有点问题，如果项目版本不支持，在下面再引用一遍1.8.2把之前版本覆盖就行，我试着是可以

　　<script type="text/javascript" src="./JCrop/js/jquery.JCrop.min.js"></script>

　　<script type="text/javascript">

　　function showPic(){

　　　　var file = $(‘#demo‘)[0].files[0];

　　　　var reader = new FileReader();

　　　　reader.onloadend = function(){

　　　　　　$(‘#avatar‘).attr(‘src‘,reader.result);

　　　　}

　　　　reader.readAsDataURL(file);

　　　　var JCropAPI = $.Jcrop($("#avatar"),{//这个格式要看清

　　　　　　aspectRatio : 1 , //设置截图为正方形

　　　　　　onChange: showCoords,//

　　　　　　onSelect: showCoords

　　　　});

　　}

　　function showCoords(coords){//这个方法一般用来预览裁剪效果

　　　　console.log(coords);//可以打印看看，存储的是截图信息

　　}

　　</script>

　　这样前台的主要功能就有了。

　　4、将图片和截取数据传往后台处理

　　上面coords对象，记录着截取图片的相关信息（x,y,x2,y2,w,h），上方两个点的坐标和截取的宽度和高度

　　Jcrop的getScaleFactor()方法可以获取图片缩放比例[w,h]。

　　具体何时以及如何完成传值就看个人喜好了。

　　5、附API

　　参数：

　　方法：

file API+JCrop 选择、裁剪并上传头像

标签：

原文地址：http://www.cnblogs.com/dwding/p/5463387.html