修改头像总结Word格式.docx
- 文档编号:5798254
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:17
- 大小:328.34KB
修改头像总结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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 修改 头像 总结