个人中心修改头像总结.docx

1、个人中心修改头像总结个人中心修改头像总结1,背景 博客停了好久，主要是最近工作太忙了，还有就是身体状况没有以前那么好了，乘着国庆长假的空档，写下这篇一直想写的文章。 运营平台是我主要致力的一个项目，这个项目分为四个大部分，个人中心，充值中心，客服中心，家长监护，最近主要忙着个人中心的重写和丰富，关于个人中心，无非就是对平台用户信息的自我管理，以及一些对用户帐号的安全保护措施，下图的菜单非常简要的说明了个人中心的功能。个人觉得最值得关注的就是密保设置和修改头像，因为之前没有处理过类似的问题，本文主要记录对头像的处理过程以及思考，希望给碰到类似问题的苦逼程序员一点借鉴。 个人中心整体功能一览2，头

2、像处理xmind 叽歪一句，个人碰到问题的时候，首先会分析问题，在分析问题的基础上，得到整体的解决方案，然后一步步分解步骤，去实现，首先奉上我的解决方案，也许不是最优的，但是按照个人的知识和技能水平，绝对是可以实现的。 修改头像mind3,实现步骤 按照我的mind，首先是上传图片，先上效果图，然后给出实现的代码。首先是整体的结构图，做的比较丑，别喷哥修改头像整体效果图 下面按照mind一步步实现， 首先：点击修改头像，弹出一个层，第一步：弹出上传图片的层，上传图片到服务器 对实现细节不感冒的屌丝可以看看代码（结合哥的mind看可以事半功倍）：分层 实现细节Html结构层 这个可以免了，一般都

3、可以弄出来Js连接层首先是弹出一个上传图片的层，然后上传图片到服务器端。 $(#editHead).bind(click, function () showUploadDiv(); ); function showUploadDiv() $(#uploadMsg).empty(); $.fancybox( type:inline, width:400, href:#uploadUserHead ); /fancybox弹出层 上传的处理代码Servlet服务端处理层（commonupload实现） 服务器端处理代码上传的处理代码$(function () $(#uploadFrom).ajax

4、Form( beforeSubmit:checkImg, error:function(data,status) alert(status+ , +data); $(#uploadMsg).html(上传文件超过1M!); , success:function (data,status) try var msg = $.parseJSON(data); if (msg.code = 200) /如果成功提交 javascript:$.fancybox.close(); $(#uploadUserHead).hide(); var data = msg.object; $(#editImg).a

5、ttr(src, data.path).show(); $(#preview1).attr(src, data.path).show(); $(.zoom).show(); $(#width).val(data.width); $(#height).val(data.height); $(#oldImgPath).val(data.realPath); $(#imgFileExt).val(data.fileExt); var api, jcrop_api, boundx, boundy; $(#editImg).Jcrop( onChange:updatePreview, onSelect:

6、updatePreview, aspectRatio:1, bgOpacity:0.5, bgColor:white, addClass:jcrop-light , function () api = this; api.setSelect(130, 65, 130 + 350, 65 + 285); api.setOptions( bgFade:true ); api.ui.selection.addClass(jcrop-selection); var bounds = this.getBounds(); boundx = bounds0; boundy = bounds1; jcrop_

7、api = this; ); function updatePreview(c) if (parseInt(c.w) 0) var rx = 80 / c.w; var ry = 80 / c.h; $(#preview1).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 ); jQuery(#x).val(c.x); jQu

8、ery(#y).val(c.y); jQuery(#x2).val(c.x2); jQuery(#y2).val(c.y2); jQuery(#w).val(c.w); jQuery(#h).val(c.h); if (msg.code = 204) $(#uploadMsg).html(msg.msg); catch (e) $(#uploadMsg).html(上传文件超过1M!); ); );/服务器端处理代码String tempSavePath = ConfigurationUtils.get(user.resource.dir); /上传的图片零时保存路径 String tempS

9、howPath = ConfigurationUtils.get(user.resource.url); /用户保存的头像路径 if(tempSavePath.equals(/img) tempSavePath=sc.getRealPath(/)+tempSavePath; Msg msg = new Msg(); msg.setCode(204); msg.setMsg(上传头像失败！); String type = request.getParameter(type); if (!Strings.isNullOrEmpty(type) & type.equals(first) reques

10、t.setCharacterEncoding(utf-8); DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload servletFileUpload = new ServletFileUpload(factory); try List items = servletFileUpload.parseRequest(request); Iterator iterator = items.iterator(); while (iterator.hasNext() FileItem item = (Fil

11、eItem) iterator.next(); if (!item.isFormField() File tempFile = new File(item.getName(); File saveTemp = new File(tempSavePath+/tempImg/); String getItemName=tempFile.getName(); String fileName = UUID.randomUUID()+. +getItemName.substring(getItemName.lastIndexOf(.) + 1, getItemName.length(); File sa

12、veDir = new File(tempSavePath+/tempImg/, fileName); /如果目录不存在，创建。 if (saveTemp.exists() = false) if (!saveTemp.mkdir() / 创建失败 saveTemp.getParentFile().mkdir(); saveTemp.mkdir(); else if (saveDir.exists() log.info(存在同名文件); saveDir.delete(); item.write(saveDir); log.info(上传头像成功!+saveDir.getName(); msg.

13、setCode(200); msg.setMsg(上传头像成功!); Image image = new Image(); BufferedImage bufferedImage = null; try bufferedImage = ImageIO.read(saveDir); catch (IOException e) e.printStackTrace(); image.setHeight(bufferedImage.getHeight(); image.setWidth(bufferedImage.getWidth(); image.setPath(tempShowPath+ /tem

14、pImg/ + fileName); log.info(image.getPath(); image.setRealPath(tempSavePath+/tempImg/+ fileName); image.setFileExt(fileName.substring(fileName.lastIndexOf(.) + 1, fileName.length(); msg.setObject(image); else log.info( + item.getFieldName(); catch (Exception ex) log.error(上传用户头像图片异常!); ex.printStack

15、Trace(); finally AppHelper.returnJsonAjaxForm(response, msg); 上传成功后，可以看到照片和照片的预览效果。看图：上传头像之后的效果Friday, October 05, 2012第二步：编辑和保存头像选中图中的区域，保存头像，就完成头像的修改。修改之后的效果入下：修改之后的头像（因为传了一张动态图片，得到的跟上图有些不同）实现细节：首先用了一个js控件：Jcrop，有兴趣的屌丝可以去搜一下，然后，利用上传之后的图片和之前的选定区域，完成了一个截图，保存为用户的头像。连接层的js：$(#saveHead).bind(click, fun

16、ction () var width = $(#width).val(); var height = $(#height).val(); var oldImgPath = $(#oldImgPath).val(); var imgFileExt = $(#imgFileExt).val(); var x = $(#x).val(); var y = $(#y).val(); var w = $(#w).val(); var h = $(#h).val(); $.ajax( url:/imgCrop, type:post, data:x:x, y:y, w:w, h:h, width:width

17、, height:height, oldImgPath:oldImgPath, fileExt:imgFileExt, datatype:json, success:function (msg) if (msg.code = 200) $(#avatar).attr(src, msg.object); forword(/nav, index); else alert(msg.msg); ); ); function checkImg() /限制上传文件的大小和后缀名 var filePath = $(inputname=uploadImg).val(); if (!filePath) $(#u

18、ploadMsg).html(请选择上传文件!).show(); return false; else var extStart = filePath.lastIndexOf(.); var ext = filePath.substring(extStart, filePath.length).toUpperCase(); if (ext != .PNG & ext != .GIF & ext != .JPG) $(#uploadMsg).html(图片限于png,gif,jpg格式!).show(); return false; return true; 服务器端处理代码： String s

19、avePath = ConfigurationUtils.get(user.resource.dir); /上传的图片保存路径 String showPath = ConfigurationUtils.get(user.resource.url); /显示图片的路径 if(savePath.equals(/img) savePath=sc.getRealPath(/)+savePath; int userId = AppHelper.getUserId(request); String userName=AppHelper.getUserName(request); Msg msg = new Msg(); msg.setCode(204); msg.setMsg(剪切图片失败！); if (userId =