本周关注比较多的是JQuery部分，优化了一个分页组件，实现了一个仿Gmail头像上传并剪辑的功能。

分页组件稍后有时间可以分享一下，今天分享下仿Gmail头像上传剪辑的功能。

本周主题：仿Gmail头像上传剪辑

这个功能是参考了Gmail的头像上传功能，并参照其流程实现的，因此叫仿Gmail头像上传剪辑，建议想用类似功能的朋友先看看Gmail的头像上传流程。

使用到的工具：

1、JQuery

2、Jquery.Form.JS (JQuery的一个form插件)，这里主要是在层里面用到它的ajaxSubmit功能。

3、JCrop（JQuery头像剪辑插件），之前有篇博文讲到。

场景，思路和做法：

1、比如更新用户信息时，要更新用户的头像，这里只是更新头像地址，而不是在更新用户信息页面时上传头像，头像上传和剪辑的处理交给其他组件完成，比如这个上传剪辑功能。

2、给一个链接，比如叫“上传照片”， 如下图：

点击该链接会弹出一个层， 如下图：

3、头像上传的事情在这个层内完成，先上传到系统的temp目录，因为这个图片最后是要删除的，JCrop 剪辑后的图片才是真正想要的。

4、将图片上传完后，进行同比例的显示缩放(注意我这里叫显示缩放，而不是真正的缩放，即仅在该层内等比例显示下即可，当然你也可以不显示缩放，结果是图片巨大个，显示不下或者出现滚动条)，显示在该页面，然后加载JCrop插件，进行图片剪辑处理（这里为了简单，没有放像Gmail那样的预览小图，需要的朋友可以参照JCrop加上），如下图：

5、点击“应用更改”时，将在服务器上进行原图片的剪辑工作，JCrop需要的是剪辑框的x,y,w,h四个参数，但是剪辑是在原图片上进行的，因此此处的x,y,w,h需要做映射，将缩略后的x,y,w,h映射到原图片的x,y,w,h上，新图片剪辑后保存到你的头像目录，最后别忘记删除temp文件夹下的图片。如下图效果：

总结：

此功能的实现上没有什么新颖的东西，主要是将几个插件的使用揉合在一块，然后形成一个用起来比较顺手的功能，实现过程可能稍感麻烦，但是最终的效果还是不错！