头像上传
2015-11-30 17:45
531 查看
直接粘代码
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 class="imgExit">
<img src="desktop-ext/avater/images/xinxunExit1.png"/>
</div> -->
</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="预览">
<!-- <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="放大" >
<input type="button" id="btnZoomOut" 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>');
}
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 class="imgExit">
<img src="desktop-ext/avater/images/xinxunExit1.png"/>
</div> -->
</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="预览">
<!-- <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="放大" >
<input type="button" id="btnZoomOut" 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>');
}
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- Web布局连载——两栏固定布局(五)
- 5个常见可用性错误和解决方案
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)