个人空间修改头像代码分析总结教案.docxVIP

1,背景博客停了好久，主要是最近工作太忙了，还有就是身体状况没有以前那么好了，乘着国庆长假的空档，写下这篇一直想写的文章。运营平台是我主要致力的一个项目，这个项目分为四个大部分，个人中心，充值中心，客服中心，家长监护，最近主要忙着个人中心的重写和丰富，关于个人中心，无非就是对平台用户信息的自我管理，以及一些对用户帐号的安全保护措施，下图的菜单非常简要的说明了个人中心的功能。个人觉得最值得关注的就是密保设置和修改头像，因为之前没有处理过类似的问题，本文主要记录对头像的处理过程以及思考，希望给碰到类似问题的苦逼程序员一点借鉴。个人中心整体功能一览2，头像处理xmind叽歪一句，个人碰到问题的时候，首先会分析问题，在分析问题的基础上，得到整体的解决方案，然后一步步分解步骤，去实现，首先奉上我的解决方案，也许不是最优的，但是按照个人的知识和技能水平，绝对是可以实现的。修改头像mind3,实现步骤按照我的mind，首先是上传图片，先上效果图，然后给出实现的代码。首先是整体的结构图，做的比较丑，别喷哥···修改头像整体效果图下面按照mind一步步实现，首先：点击修改头像，弹出一个层，第一步：弹出上传图片的层，上传图片到服务器对实现细节不感冒的屌丝可以看看代码（结合哥的mind看可以事半功倍）：分层 实现细节Html结构层 这个可以免了，一般都可以弄出来Js连接层首先是弹出一个上传图片的层，然后上传图片到服务器端。 $(#editHead).bind(click, function () {showUploadDiv();});function showUploadDiv() {$(#uploadMsg).empty();$.fancybox({type:inline,width:400,href:#uploadUserHead});}//fancybox弹出层上传的处理代码Servlet服务端处理层（commonupload实现） 服务器端处理代码上传的处理代码$(function () {$(#uploadFrom).ajaxForm({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).attr(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: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 = bounds[0];boundy = bounds[1];jcrop_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:-