date: 2017/4/10 16:17:25
tags:

• Jcrop
• 预览裁剪上传头像

---

最近用了Jcrop实现了一个上传头像的功能，在这里记录一下，也希望能帮助到有需要的朋友。

对IE兼容性尚可，IE8和IE9不支持裁剪和预览，IE9以上可正常使用。

直接上源码:https://github.com/iftom/springmvcdemo_jcrop

下面是最终效果图:

效果预览_1
效果预览_2
效果预览_3
效果预览_4

下面是一个说明书式的介绍，按照我的步骤一步步走下去，功能就可以实现。

上传头像本身没有什么难点，但是加入了裁剪和预览功能，涉及的前端问题比较多，我途中也踩了许多坑，如果你想快速见到效果，消除对一件未知的事情的焦虑的话，我建议你先把源码下载下来，放到Tomcat里跑起来，看到真实的效果后，再着手开始写自己的代码。

详细的原理内容将来会更新。

<strong>第零步------开始前的准备</strong>

在开始这个Demo之前，你必须已经具备以下条件:

• 可以正常访问的SpringMVC或者SpringBoot项目
• 确保你的项目可以接受文件上传,具体的配置可以参考代码内的mvc-dispatcher-servlet.xml文件的末尾
• 一个上传头像的HTML原型页面，如果没有可以参考代码内的页面
• Jcrop的使用方式可参考代码内的写法，但是还请你仔细阅读Jcrop官方的Demo和文档

<strong>第一步------下载Jcrop相关文件</strong>

登录Jcrop官网，下载最新的Jcrop版本(目前是v0.9.12)。

Jcrop的官网访问速度可能很慢，不过一定能够打开，加载的时候可以看看这个线上的中文版的Demo。

下载完后，把相关的css、js文件放到你的项目内并且在页面上引入即可。

别忘了还有一张名为jcrop.gif的图片。

<strong>第二步------编写前端页面</strong>

完整代码请参考personalPhoto.jsp，这里只对几个关键点说明一下。

1.因为各大浏览器的文件框的样式不同，所以页面上很少用到原生的<input type="file"/>来当做上传文件的按钮。而是把原生的文件框设置为透明（注意不是hidden隐藏），并且将其覆盖在另一个普通的button按钮上来完成样式的统一。

file按钮透明的css样式:
#fcupload{ opacity:0;/* 透明，非IE */ filter:alpha(opacity=0);/* 透明，IE*/ position: absolute; top:123px; width:135px; font-size:29px; }

你可以通过top和left来调节file按钮的位置，通过font-size来设置file按钮的大小.

下面是两张对比图来直观的感受效果:

效果预览_2
效果预览_2

2.如果你需要添加多个预览图，请参考uploadUserPhoto.css文件和personalPhoto.jsp页面中的id的前缀为preview-pane的几个标签。

<strong>第三步------编写后端代码</strong>

完整代码参考MainController.java

1.除了对图片的大小和后缀名的验证之外，你还需要验证图片是否是一张真正的图片，而不是手动改过后缀名的一张伪造的图片。方法是通过JAVA代码获取图片的宽高，如果不能获取到，则认为这是一张非法的图片。代码参考FileUploadUtil.java。（即使是一张真正的图片，依然可以嵌入非法的代码，这里没有做更多的处理，日后更新。）

2.对图片的裁剪，如果你没有时间研究，直接复制ImgCut.java当做工具类使用即可。

3.为了方便Demo的展示，我把上传的图片的地址写入了config.properties文件内，请根据自己实际情况修改存储图片地址的方式。

<strong>IE兼容性</strong>

• IE8和IE9对文件上传支持不太友好，必须将
  工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径 打开，浏览器才能取到本地图片的路径。
  <br />
  如果你遇到了什么问题，欢迎联系我，微信:15233639789
  我的Hexo博客:http://wangxiaoyu.date