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

个人中心修改头像总结 1,背景 博客停了好久，主要是最近工作太忙了，还有就是身体状况没有以前那么好了，乘着国庆长假的空档，写下这篇一直想写的文章。 运营平台是我主要致力的一个项目，这个项目分为四个大部分，个人中心，充值中心，客服中心，家长监护，最近主要忙着个人中心的重写和丰富，关于个人中心，无非就是对平台用户信息的自我管理，以及一些对用户帐号的安全保护措施，下图的菜单非常简要的说明了个人中心的功能。个人觉得最值得关注的就是密保设置和修改头像，因为之前没有处理过类似的问题，本文主要记录对头像的处理过程以及思考，希望给碰到类似问题的苦逼程序员一点借鉴。 个人中心整体功能一览 2，头像处理xmind 叽歪一句，个人碰到问题的时候，首先会分析问题，在分析问题的基础上，得到整体的解决方案，然后一步步分解步骤，去实现，首先奉上我的解决方案，也许不是最优的，但是按照个人的知识和技能水平，绝对是可以实现的。 ? ? ? ? ? ? ? ? ?修改头像mind 3,实现步骤 按照我的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; ? ? ? ? ? ? ? ? ?