插件使用]Jcrop+fileinput组合实现头像上传功能实例

很久没有更新博客了，再不写点东西都烂了。

这次更新一个小内容，是两个插件的组合使用，实现头像上传功能。

业务需求：

头像上传功能，要对上传的文件进行剪切，且保证头像到服务器时必须是正方形的。

优化<input type="file">的显示样式，基础的样式实在太难看了。

上传的头像需要进行质量压缩跟大小裁剪，以减缓浏览器的压力。

成果预览：

使用到的技术插件

Jcrop：用于前端“裁剪”图片

bootstrap-fileinput：用于前端优化上传控件样式

ARTtemplate：JS版的JSTL？反正就是一个腾讯的模板化插件，很好用，真心。

bootstrap-sco.modal.js：这个是bootstrap的一个模态插件

SpringMVC：使用框架自带的MultipartFile来获取文件（效率能够大大的提高）

Image：这个是Java的内置类，用于处理图片很方便。

原理说明

首先是Jcrop这个前端JS插件，这个插件很好用，其实在各大网站中也很常见，先上图：

说说原理，实际上，Jcrop并没有在客户端帮我们把图片进行裁剪，只是收集了用户的“裁剪信息”，然后传到后端，最后的裁剪和压缩，还是要依靠服务器上的代码来进行。

我们可以看到这个插件在图片上显示出了8个控制点，让用户选择裁剪区域，当用户选择成功后，会自动的返回“裁剪信息”，所谓的裁剪信息，其实就是选框的左上角原点坐标，及裁剪框的宽度和高度，通过这四个值，在后端就可以进行裁剪工作了。

但是我们要注意，用户在上传图片的时候，长度宽度都是不规则的，当然我们可以用bootstap-fileinput这个插件去限制用户只能上传指定宽高的图片，但这就失去了我们“裁剪”的意义，而且用户的体验就非常差劲。然而jcrop所返回的坐标值及宽高，并不是基于所上传图片自身的像素，而是如图中所示，是外层DIV的宽高。举一个例子，上图我实际放入的个人照片宽度是852px，但是Jcrop的截取宽度是312px，这个312px并不是真正图片上的实际宽度，是经过缩放后的宽度，所以我们后端一定需要重新对这个312px进行一次还原，还原到照片实际比例的宽度。

好啦，原理就是这样子。接下来，就是上代码了。

HTML

<script type="text/html"> <div> <form role="form" enctype="multipart/form-data" method="post"> <div> <div> <img alt="" src="https://www.jb51.net/${pageContext.request.contextPath}/img/showings.jpg"/> </div> </div> <div></div> <input type="file"/> <div></div> <div role="alert"></div> <input type="hidden"/> <input type="hidden"/> <input type="hidden"/> <input type="hidden"/> </form> </div> </script>

这个就是一个ArtTemplate的模板代码，就写在</body>标签上方就行了，因为text/html这个类型，不会被识别，所以实际上用Chrome调试就可以看得到，前端用户是看不到这段代码的。

简单解释一下这个模板，这个模板是我最后放入模态窗口时用的模板，就是把这段代码，直接丢进模态弹出来的内容部分。因为是文件上传，自然需要套一个<form>标签，然后必须给form标签放入 enctype="multipart/form-data"，否则后端Spring就无法获取这个文件。

"embed-responsive embed-responsive-16by9"这个类就是用来限制待编辑图片加载后的宽度大小，值得注意的是，我在其内种，加了一个

<div>

pre-scrollable这个类，会让加载的图片不会因为太大而“变形”，因为我外层通过embed-responsive-16by9限制死了图片的宽高，图片本身又加了img-responsive这个添加响应式属性的类，为了防止图片缩放，导致截图障碍，所以就给内层加上pre-scrollable，这个会给图片这一层div加上滚动条，如果图片高度太高，超过了外层框，则会出现滚动条，而这不会影响图片截取，同时又保证了模态窗口不会“太长”，导致体验糟糕（尤其在移动端）。

底下四个隐藏域相信大家看他们的name值也就知道个大概，这个就是用于存放Jcrop截取时所产生的原点坐标和截取宽高的值。

JS

$(document).ready(function () { new PageInit().init(); }); function PageInit() { var api = null; var _this = this; this.init = function () { $("[name='upload']").on('click', this.portraitUpload) }; this.portraitUpload = function () { var model = $.scojs_modal({ title: '头像上传', content: template('portraitUpload'), onClose: refresh } ); model.show(); var fileUp = new FileUpload(); var portrait = $('#fileUpload'); var alert = $('#alert'); fileUp.portrait(portrait, '/file/portrait', _this.getExtraData); portrait.on('change', _this.readURL); portrait.on('fileuploaderror', function (event, data, msg) { alert.removeClass('hidden').html(msg); fileUp.fileinput('disable'); }); portrait.on('fileclear', function (event) { alert.addClass('hidden').html(); }); portrait.on('fileloaded', function (event, file, previewId, index, reader) { alert.addClass('hidden').html(); }); portrait.on('fileuploaded', function (event, data) { if (!data.response.status) { alert.html(data.response.message).removeClass('hidden'); } }) }; this.readURL = function () { var img = $('#cut-img'); var input = $('#fileUpload'); if (input[0].files && input[0].files[0]) { var reader = new FileReader(); reader.readAsDataURL(input[0].files[0]); reader.onload = function (e) { img.removeAttr('src'); img.attr('src', e.target.result); img.Jcrop({ setSelect: [20, 20, 200, 200], handleSize: 10, aspectRatio: 1, onSelect: updateCords }, function () { api = this; }); }; if (api != undefined) { api.destroy(); } } function updateCords(obj) { $("#x").val(obj.x); $("#y").val(obj.y); $("#w").val(obj.w); $("#h").val(obj.h); } }; this.getExtraData = function () { return { sw: $('.jcrop-holder').css('width'), sh: $('.jcrop-holder').css('height'), x: $('#x').val(), y: $('#y').val(), w: $('#w').val(), h: $('#h').val() } } }

这个JS是上传页面的相关逻辑。会JS的人都看得懂它的意义，我就简单说一下几个事件的意义：

portrait.on('fileuploaderror', function (event, data, msg) { alert.removeClass('hidden').html(msg); fileUp.fileinput('disable'); });

这个事件，是用于bootstrap-fileinput插件在校验文件格式、文件大小等的时候，如果不符合我们的要求，则会对前面HTML代码中有一个

<div role="alert"></div>

进行一些错误信息的显示操作。

portrait.on('fileclear', function (event) { alert.addClass('hidden').html(); });

这部分代码，是当文件移除时，隐藏错误信息提示区，以及清空内容，当然这是符合我们的业务逻辑的。

portrait.on('fileloaded', function (event, file, previewId, index, reader) { alert.addClass('hidden').html(); });