原创力文档- 1、本文档共11页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
个人空间修改头像代码分析总结
杭州java软件培训
杭州网络营销培训
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;
$(#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 * boun
文档评论（0）