个人中心修改头像总结Word下载.docx
《个人中心修改头像总结Word下载.docx》由会员分享，可在线阅读，更多相关《个人中心修改头像总结Word下载.docx（17页珍藏版）》请在冰点文库上搜索。
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）;
）.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"
.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:
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（{
Math.round（rx*boundx）+'
px'
height:
Math.round（ry*boundy）+'
marginLeft:
-'
+Math.round（rx*c.x）+'
marginTop:
+Math.round（ry*c.y）+'
}
jQuery（'
#x'
）.val（c.x）;
#y'
）.val（c.y）;
#x2'
）.val（c.x2）;
#y2'
）.val（c.y2）;
#w'
）.val（c.w）;
#h'
）.val（c.h）;
if（msg.code==204）{
）.html（msg.msg）;
}catch（e）{
//服务器端处理代码
StringtempSavePath=
ConfigurationUtils.get（"
user.resource.dir"
//上传的图片零时保存路径
StringtempShowPath=
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（）;
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+"
fileName）;
//如果目录不存在，创建。
if（saveTemp.exists（）==false）{
saveTemp.mkdir（））{//创建失败
saveTemp.getParentFile（）.mkdir（）;
saveTemp.mkdir（）;
}else{
if（saveDir.exists（））{
log.info（"
存在同名文件·
saveDir.delete（）;
item.write（saveDir）;
上传头像成功!
+saveDir.getName（））;
msg.setCode（200）;
Imageimage=newImage（）;
BufferedImagebufferedImage=null;
bufferedImage=ImageIO.read（saveDir）;
}catch（IOExceptione）{
e.printStackTrace（）;
image.setHeight（bufferedImage.getHeight（））;
image.setWidth（bufferedImage.getWidth（））;
image.setPath（tempShowPath+"
+fileName）;
log.info（image.getPath（））;
image.setRealPath（tempSavePath+"
+fileName）;
image.setFileExt（fileName.substring（fileName.lastIndexOf（"
）+1,fileName.length（）））;
msg.setObject（image）;
+item.getFieldName（））;
}catch（Exceptionex）{
log.error（"
上传用户头像图片异常!
ex.printStackTrace（）;
finally{
AppHelper.returnJsonAjaxForm（response,msg）;
上传成功后，可以看到照片和照片的预览效果。
看图：
上传头像之后的效果
Friday,October05,2012
第二步：
编辑和保存头像
选中图中的区域，保存头像，就完成头像的修改。
修改之后的效果入下：
修改之后的头像（因为传了一张动态图片，得到的跟上图有些不同）
实现细节：
首先用了一个js控件：
Jcrop，有兴趣的屌丝可以去搜一下，然后，利用上传之后的图片和之前的选定区域，完成了一个截图，保存为用户的头像。
连接层的js：
$（"
#saveHead"
varwidth=$（"
）.val（）;
varheight=$（"
varoldImgPath=$（"
varimgFileExt=$（"
varx=$（'
vary=$（'
varw=$（'
varh=$（'
$.ajax（{
url:
/imgCrop'
post'
data:
{x:
x,y:
y,w:
w,h:
h,width:
width,height:
height,oldImgPath:
oldImgPath,fileExt:
imgFileExt},
datatype:
json'
function（msg）{
if（msg.code==200）{
#avatar"
msg.object）;
forword（'
/nav'
'
index'
else{
alert（msg.msg）;
functioncheckImg（）{
//限制上传文件的大小和后缀名
varfilePath=$（"
input[name='
uploadImg'
]"
filePath）{
）.html（"
请选择上传文件!
returnfalse;
varextStart=filePath.lastIndexOf（"
varext=filePath.substring（extStart,filePath.length）.toUpperCase（）;
if（ext!
="
.PNG"
&
ext!
.GIF"
.JPG"
）{
图片限于png,gif,jpg格式!
returntrue;
服务器端处理代码：
StringsavePath=
//上传的图片保存路径
StringshowPath=
//显示图片的路径
if（savePath.equals（"
{
savePath=sc.getRealPath（"
）+savePath;
}
intuserId=AppHelper.getUserId（request）;
StringuserName=AppHelper.getUserName（request）;
Msgmsg=newMsg（）;
msg.setCode（204）;
msg.setMsg（"
剪切图片失败！
if（userId<
=
升级会员 