《个人中心修改头像总结》由会员分享，可在线阅读，更多相关《个人中心修改头像总结（11页珍藏版）》请在金锄头文库上搜索。
1、个人中心修改头像总结1,背景博客停了好久，主要是最近工作太忙了，还有就是身体状况没有以前那么好了，乘着国庆长假的空档， 写下这篇一直想写的文章。运营平台是我主要致力的一个项目，这个项目分为四个大部分，个人中心，充值中心，客服中心，家 长监护，最近主要忙着个人中心的重写和丰富，关于个人中心，无非就是对平台用户信息的自我管理，以 及一些对用户帐号的安全保护措施，下图的菜单非常简要的说明了个人中心的功能。个人觉得最值得关注 的就是密保设置和修改头像，因为之前没有处理过类似的问题，本文主要记录对头像的处理过程以及思考， 希望给碰到类似问题的苦逼程序员一点借鉴。M基本信息8个人资料国基本资料详细资料 命
2、修改头像 5教育背景 g工作信息n邮箱绑定E3密保邮箱 首密保间题 1也密保手机个人中心整体功能一览2，头像处理xmind叽歪一句，个人碰到问题的时候，首先会分析问题，在分析问题的基础上，得到整体的解决方案，然 后一步步分解步骤，去实现，首先奉上我的解决方案，也许不是最优的，但是按照个人的知识和技能水平， 绝对是可以实现的。修改头像整体效果图下面按照mind 一步步实现首先：点击修改头像，弹出一个层，3,实现步骤比较丑，别喷哥第一步：弹出上传图片的层，上传图片到服务器对实现细节不感冒的屈丝可以看看代码（结合哥的mind看可以事半功倍）：分层实现细节Html结构层这个可以免了，一般都可以弄出来J
3、s连接层首先是弹出一个上传图片的层，然后上传图片到服务器端。$(#editHead).bind(click”, function () showUploadDiv();)；function showUploadDiv() $(#uploadMsg).empty();$.fancybox(type:inline,width:400,href:#uploadUserHead);/fancybox 弹出层上传的处理代码Servlet服务端处理层(commonupload实现)服务器端处理代码上传的处理代码$(function () $(#uploadFrom).ajaxForm(beforeSubm
4、it:checkImg,error:function(data,status)alert(status+ , +data);$(#uploadMsg).html(上传文件超过 1M!);,success:function (data,status) tryvar msg = $.parseJSON(data);if (msg.code = 200)如果成功提交javascript:$.fancybox.close();$(#uploadUserHead).hide();var data = msg.object;$(#editImg).attr(src, data.path).show();$
5、(#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:updatePreview, aspectRatio:1, bgOpacit
6、y: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_api = this;);function updatePreview(c) if
7、(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);jQuery(#y).val(c.y);jQuery(#x2).val(c.x2);jQuery(
8、#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 tempShowPath = ConfigurationUtils.get(user.resource.url); 用
9、户保存的 头像路径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) request.setCharacterEncoding(utf-8);DiskFileItemFactory factory = n
10、ew DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(factory); try List items = servletFileUpload.parseRequest(request);Iterator iterator = items.iterator();while (iterator.hasNext() FileItem item = (FileItem) iterator.next();if (!item.isFormField() File tempFile = ne
11、w File(item.getName();File saveTemp = new File(tempSavePath+/tempImg/);String getItemName=tempFile.getName();String fileName = UUID.randomUUID()+. +getItemName.substr ing(getItemName.lastIndexOf(.) + 1, getItemName.length();File saveDir = new File(tempSavePath+/tempImg/, fileName); 如果目录不存在，创建。if (sa
12、veTemp.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.setCode(200);msg.setMsg(上 传头像成功!)；Image image = new Image();BufferedImage
13、bufferedImage = null; try bufferedImage = ImageIO.read(saveDir); catch (IOException e) e.printStackTrace();image.setHeight(bufferedImage.getHeight();image.setWidth(bufferedImage.getWidth();image.setPath(tempShowPath+ /tempImg/ + fileName);log.info(image.getPath();image.setRealPath(tempSavePath+/temp
14、Img/+ fileName);image.setFileExt(fileName.substring(fileName.lastIndexOf(.) + 1, fileName.length();msg.setObject(image); else log.info( + item.getFieldName(); catch (Exception ex) log.error(上传用户头像图片异常!”)；ex.printStackTrace();finally AppHelper.returnJsonAjaxForm(response, msg); 上传成功后，可以看到照片和照片的预览效果。看图：上传头像之后的效果I耳本信息7存在堂承牛智，贝世七奇音，I账号安全Friday, October 05, 2012第二步：编辑和保存头像选中图中的区域，保存头像，就完成头像的修改。修改之后的效果入下：修改之后的头像（因为传了一张动态图片，得到的跟上图有些不同）实现细节：
