头像上传

来源：互联网发布：小鸣单车退押金知乎编辑：程序博客网时间：2024/04/29 04:19

直接粘代码

1.页面部分：

<div class="my_container" id="uploadavter">

<div class="my_top">

<div class="my_function" id="my_function">
<a href="javascript:void(0)">
<label for="upload-files" onclick="showSystem()" style="margin-left:15px"><font id="systemFont">系统头像</font> | </label>
</a>
<a href="javascript:void(0)">
<label for="upload-file"><font id="customFont">本地头像</font></label>
<input type="file" class="" name="upload-file" id="upload-file" accept="image/*"/>
</a>

</div>
</div>
<div class="my_center">
<div class="my_left">

<div id="systemAvatar" class="systemAvatarClass">
<div>
<ul class="my_history_list">
<li>
<img onclick="avatarXxGrila()" src="desktop-ext/avater/images/avatar-xx-gril-a.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilb()" src="desktop-ext/avater/images/avatar-xx-gril-b.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilc()" src="desktop-ext/avater/images/avatar-xx-gril-c.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrild()" src="desktop-ext/avater/images/avatar-xx-gril-d.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrile()" src="desktop-ext/avater/images/avatar-xx-gril-e.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilf()" src="desktop-ext/avater/images/avatar-xx-gril-f.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilg()" src="desktop-ext/avater/images/avatar-xx-gril-g.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilh()" src="desktop-ext/avater/images/avatar-xx-gril-h.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrili()" src="desktop-ext/avater/images/avatar-xx-gril-i.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilj()" src="desktop-ext/avater/images/avatar-xx-gril-j.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilk()" src="desktop-ext/avater/images/avatar-xx-gril-k.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrill()" src="desktop-ext/avater/images/avatar-xx-gril-l.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilm()" src="desktop-ext/avater/images/avatar-xx-gril-m.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGriln()" src="desktop-ext/avater/images/avatar-xx-gril-n.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilo()" src="desktop-ext/avater/images/avatar-xx-gril-o.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
<li>
<img onclick="avatarXxGrilp()" src="desktop-ext/avater/images/avatar-xx-gril-p.jpg" style="width:56px;height:56px; border-radius:10px; margin-top:1px; margin-left:1px;"></img>
</li>
</ul>
</div>
</div>


<div id="customAvatar" class="my_content">
<div class="imageBox">
<div class="thumbBox">
<div class="my_y"></div>
</div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="btnZoomClass">
<input type="button" id="btnCrop" class="Btnsty_peyton" value="预览">

</div>
</div>

</div>

<div class="my_right">

<div class="cropped"></div>
</div>
</div>

<div class="my_bottom">
<div class="bottomBtn" style="position:relative;right:-355px;top:8px;">
<button onclick="confirmBtn()" id="confirmBt" class="comfirmBtn">确定</button>
<button onclick="cancleBtn()" id="cancleBt" class="cancleBtn">取消</button>
</div>
</div>

</div>

2.数据处理，主要是利用base64编码，将截取的图片—>base64->图片->文件

@Marker(name="头像上传")
@RequestMapping(value="/uploadAvater")
public @ResponseBody String uploadAvater(String imgSrc) {
if (imgSrc == null) // 图像数据为空
return AjaxSuccess("更改失败！",false);
if(imgSrc.length()<22)
return AjaxSuccess("更改失败！",false);
String imgSrcs = imgSrc.substring(22);//去掉头部的22个固定字符
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] b = decoder.decodeBuffer(imgSrcs);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
// 生成png图片写入到imgFile文件中
String avaterId = curUser.getUesrId().toString();
String imgFile = "D:/uploadAva";
String imgFilePath = imgFile+"/avater-"+avaterId+".png";// 新生成的图片
File imgFiles = new File(imgFile);
if(!imgFiles.exists()){
imgFiles.mkdirs();
}
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();

//将上传的图片拷贝到系统
File src = new File(imgFilePath);
String path = request.getRealPath("/upload");
File diyParnetDir = new File(path + "/uploadAvater");
if (!diyParnetDir.exists()) {
diyParnetDir.mkdirs();
}
com.yiye.basic.utils.FileUtils.fileChannelCopy(src, new File(path + "/uploadAvater/" + "avater-"+avaterId+".png"));
return AjaxSuccess("更改成功！",true);
} catch (Exception e) {
return AjaxSuccess("更改失败！",false);
}
}

js代码:

var imgs;
$(window).load(function() {
$('.cropped').html('');
$('.cropped').append('<div style="width:100px;margin-top:10px;margin-left:-20px"><lable style="font-size:12px;">预览：</lable></div>');
$('.cropped').append('<img src="upload/uploadAvater/avater-'+curUser.uesrId+'.png" align="absmiddle" style="width:60px;margin-top:10px;border-radius:60px;" ><p style="margin-top:5px;">60*60</p>');
$('.cropped').append('<img src="upload/uploadAvater/avater-'+curUser.uesrId+'.png" align="absmiddle" style="width:100px;margin-top:10px;border-radius:100px;"><p style="margin-top:5px">100*100</p>');

var options =
{
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: 'upload/uploadAvater/avater-'+curUser.uesrId+'.png'
}

var cropper = $('.imageBox').cropbox(options);

$('#upload-file').on('change', function(){
var reader = new FileReader();
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
$('#btnCrop').on('click', function(){
var img = cropper.getDataURL();
imgs = img;
$('.cropped').html('');
$('.cropped').append('<div style="width:100px;margin-top:10px;margin-left:-20px"><lable style="font-size:12px;">预览：</lable></div>');
$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:60px;margin-top:10px;border-radius:60px;" ><p style="margin-top:5px;">60*60</p>');
$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:100px;margin-top:30px;border-radius:100px;"><p style="margin-top:5px">100*100</p>');
//$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:120px;margin-top:10px;border-radius:120px;box-shadow:2px 2px 12px #7E7E7E;"><p style="margin-top:5px;">120*120</p>');
})
$('#confirmBt').on('click', function(){
/*var img = cropper.getDataURL();*/
if(imgs == null){
alert("亲，你没有选择任何照片哦")
}
Ext.Ajax.request({
url:'user/uploadAvater',
params:{
imgSrc: imgs
},
async:false,
success:function(response){
var responseArray = Ext.JSON.decode(response.responseText);
},
failure: function(response){
Ext.MessageBox.alert('错误', '服务器出错，请与后台服务人员联系');
}
});
})
$('#btnZoomIn').on('click', function(){
cropper.zoomIn();
})
$('#btnZoomOut').on('click', function(){
cropper.zoomOut();
})
//弹框显示
var x = 10;
var y = 20; //设置提示框相对于偏移位置，防止遮挡鼠标
$("#avatarImg").mouseover(function (e) { //鼠标移上事件
this.myTitle = this.title; //把title的赋给自定义属性 myTilte ，屏蔽自带提示
this.title = "亲，点这里可以更换头像哦";
var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建提示框
$("body").append(tooltipHtml); //添加到页面中
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置提示框的坐标，并显示
}).mouseout(function () { //鼠标移出事件
this.title = this.myTitle; //重新设置title
$("#tooltip").remove(); //移除弹出框
}).mousemove(function (e) { //跟随鼠标移动事件
$("#toolti").css({ "top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});

//系统头像
function avatarXxGrila(){
preview('desktop-ext/avater/images/avatar-xx-gril-a.jpg');
}
function avatarXxGrilb(){
preview('desktop-ext/avater/images/avatar-xx-gril-b.jpg');
}
function avatarXxGrilc(){
preview('desktop-ext/avater/images/avatar-xx-gril-c.jpg');
}
function avatarXxGrild(){
preview('desktop-ext/avater/images/avatar-xx-gril-d.jpg');
}
function avatarXxGrile(){
preview('desktop-ext/avater/images/avatar-xx-gril-e.jpg');
}
function avatarXxGrilf(){
preview('desktop-ext/avater/images/avatar-xx-gril-f.jpg');
}
function avatarXxGrilg(){
preview('desktop-ext/avater/images/avatar-xx-gril-g.jpg');
}
function avatarXxGrilh(){
preview('desktop-ext/avater/images/avatar-xx-gril-h.jpg');
}
function avatarXxGrili(){
preview('desktop-ext/avater/images/avatar-xx-gril-i.jpg');
}
function avatarXxGrilj(){
preview('desktop-ext/avater/images/avatar-xx-gril-j.jpg');
}
function avatarXxGrilk(){
preview('desktop-ext/avater/images/avatar-xx-gril-k.jpg');
}
function avatarXxGrill(){
preview('desktop-ext/avater/images/avatar-xx-gril-l.jpg');
}
function avatarXxGrilm(){
preview('desktop-ext/avater/images/avatar-xx-gril-m.jpg');
}
function avatarXxGriln(){
preview('desktop-ext/avater/images/avatar-xx-gril-n.jpg');
}
function avatarXxGrilo(){
preview('desktop-ext/avater/images/avatar-xx-gril-o.jpg');
}
function avatarXxGrilp(){
preview('desktop-ext/avater/images/avatar-xx-gril-p.jpg');
}
function preview(imgsrc){
var optionsA =
{
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: imgsrc
}
var cropperA = $('.imageBox').cropbox(optionsA);
var reader = new FileReader();
reader.onload = function(e) {
optionsA.imgSrc = e.target.result;
cropperA = $('.imageBox').cropbox(optionsA);
}
var img = cropperA.getDataURL();
imgs = img;
$('.cropped').html('');
$('.cropped').append('<div style="width:100px;margin-top:10px;margin-left:-20px"><lable style="font-size:12px;">预览：</lable></div>');
$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:60px;margin-top:10px;border-radius:60px;" ><p style="margin-top:5px;">60*60</p>');
$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:100px;margin-top:10px;border-radius:100px;"><p style="margin-top:5px">100*100</p>');
// $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:120px;margin-top:10px;border-radius:120px;box-shadow:2px 2px 12px #7E7E7E;"><p style="margin-top:5px;">120*120</p>');
}

0 0