个人中心修改头像总结.docx
《个人中心修改头像总结.docx》由会员分享,可在线阅读,更多相关《个人中心修改头像总结.docx(17页珍藏版)》请在冰豆网上搜索。
个人中心修改头像总结
个人中心修改头像总结
1,背景
博客停了好久,主要是最近工作太忙了,还有就是身体状况没有以前那么好了,乘着国庆长假的空档,写下这篇一直想写的文章。
运营平台是我主要致力的一个项目,这个项目分为四个大部分,个人中心,充值中心,客服中心,家长监护,最近主要忙着个人中心的重写和丰富,关于个人中心,无非就是对平台用户信息的自我管理,以及一些对用户帐号的安全保护措施,下图的菜单非常简要的说明了个人中心的功能。
个人觉得最值得关注的就是密保设置和修改头像,因为之前没有处理过类似的问题,本文主要记录对头像的处理过程以及思考,希望给碰到类似问题的苦逼程序员一点借鉴。
个人中心整体功能一览
2,头像处理xmind
叽歪一句,个人碰到问题的时候,首先会分析问题,在分析问题的基础上,得到整体的解决方案,然后一步步分解步骤,去实现,首先奉上我的解决方案,也许不是最优的,但是按照个人的知识和技能水平,绝对是可以实现的。
修改头像mind
3,实现步骤
按照我的mind,首先是上传图片,先上效果图,然后给出实现的代码。
首先是整体的结构图,做的比较丑,别喷哥···
修改头像整体效果图
下面按照mind一步步实现,
首先:
点击修改头像,弹出一个层,
第一步:
弹出上传图片的层,上传图片到服务器
对实现细节不感冒的屌丝可以看看代码(结合哥的mind看可以事半功倍):
分层实现细节
Html结构层这个可以免了,一般都可以弄出来
Js连接层
首先是弹出一个上传图片的层,然后上传图片到服务器端。
$("#editHead").bind("click",function(){
showUploadDiv();
});
functionshowUploadDiv(){
$("#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{
varmsg=$.parseJSON(data);
if(msg.code==200)
{//如果成功提交
javascript:
$.fancybox.close();
$("#uploadUserHead").hide();
vardata=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);
varapi,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');
varbounds=this.getBounds();
boundx=bounds[0];
boundy=bounds[1];
jcrop_api=this;
});
functionupdatePreview(c){
if(parseInt(c.w)>0){
varrx=80/c.w;
varry=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('#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!
');
}
}
});
});
//服务器端处理代码
StringtempSavePath= ConfigurationUtils.get("user.resource.dir");//上传的图片零时保存路径
StringtempShowPath= ConfigurationUtils.get("user.resource.url");//用户保存的头像路径
if(tempSavePath.equals("/img"))
{
tempSavePath=sc.getRealPath("/")+tempSavePath;
}
Msgmsg=newMsg();
msg.setCode(204);
msg.setMsg("上传头像失败!
");
Stringtype=request.getParameter("type");
if(!
Strings.isNullOrEmpty(type)&&type.equals("first")){
request.setCharacterEncoding("utf-8");
DiskFileItemFactoryfactory=newDiskFileItemFactory();
ServletFileUploadservletFileUpload=newServletFileUpload(factory);
try{
Listitems=servletFileUpload.parseRequest(request);
Iteratoriterator=items.iterator();
while(iterator.hasNext()){
FileItemitem=(FileItem)iterator.next();
if(!
item.isFormField()){
{
FiletempFile=newFile(item.getName());
FilesaveTemp=newFile(tempSavePath+"/tempImg/");
StringgetItemName=tempFile.getName();
StringfileName=UUID.randomUUID()+"."+getItemName.substring(getItemName.lastIndexOf(".")+1,getItemName.length());
FilesaveDir=newFile(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.setCode(200);
msg.setMsg("上传头像成功!
");
Imageimage=newImage();
BufferedImagebufferedImage=null;
try{
bufferedImage=ImageIO.read(saveDir);
}catch(IOExceptione){
e.printStackTrace();
}
image.setHeight(bufferedImage.getHeight());
image.setWidth(bufferedImage.getWidth());
image.setPath(tempShowPath+"/tempImg/"+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(Exceptionex){
log.error("上传用户头像图片异常!
");
ex.printStackTrace();
}
finally{
AppHelper.returnJsonAjaxForm(response,msg);
}
}
上传成功后,可以看到照片和照片的预览效果。
看图:
上传头像之后的效果
Friday,October05,2012
第二步:
编辑和保存头像
选中图中的区域,保存头像,就完成头像的修改。
修改之后的效果入下:
修改之后的头像(因为传了一张动态图片,得到的跟上图有些不同)
实现细节:
首先用了一个js控件:
Jcrop,有兴趣的屌丝可以去搜一下,然后,利用上传之后的图片和之前的选定区域,完成了一个截图,保存为用户的头像。
连接层的js:
$("#saveHead").bind("click",function(){
varwidth=$("#width").val();
varheight=$("#height").val();
varoldImgPath=$("#oldImgPath").val();
varimgFileExt=$("#imgFileExt").val();
varx=$('#x').val();
vary=$('#y').val();
varw=$('#w').val();
varh=$('#h').val();
$.ajax({
url:
'/imgCrop',
type:
'post',
data:
{x:
x,y:
y,w:
w,h:
h,width:
width,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);
}
}
});
});
functioncheckImg(){
//限制上传文件的大小和后缀名
varfilePath=$("input[name='uploadImg']").val();
if(!
filePath){
$("#uploadMsg").html("请选择上传文件!
").show();
returnfalse;
}
else{
varextStart=filePath.lastIndexOf(".");
varext=filePath.substring(extStart,filePath.length).toUpperCase();
if(ext!
=".PNG"&&ext!
=".GIF"&&ext!
=".JPG"){
$("#uploadMsg").html("图片限于png,gif,jpg格式!
").show();
returnfalse;
}
}
returntrue;
}
服务器端处理代码:
StringsavePath= ConfigurationUtils.get("user.resource.dir");//上传的图片保存路径
StringshowPath= ConfigurationUtils.get("user.resource.url");//显示图片的路径
if(savePath.equals("/img"))
{
savePath=sc.getRealPath("/")+savePath;
}
intuserId=AppHelper.getUserId(request);
StringuserName=AppHelper.getUserName(request);
Msgmsg=newMsg();
msg.setCode(204);
msg.setMsg("剪切图片失败!
");
if(userId<=