JavaScript代码:
<script>
var personPhoto = $("#personPhoto").html();
$("#personPhoto").remove();
//点击修好头像
function changePhoto(){
var popDialog = dialog({
width: 750,
height:400,
title: '修改头像',
content: personPhoto,
ok: function(){
var imgv = $("#img").val();
if(imgv!=""){
$.ajax({
url:'<%=path%>/${role}/saveImage',
type:'POST', //GET
async:true, //或false,是否异步
data:{
blob:imgv,
id:$("#userId").val()
},
dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text
success:function(data){
if(data.msg == "success"){
$("#adjustImage").html('');
$("#adjustImage").append('<img src="'+imgv+'" height="210px;" width="210px;">');
$(".tou a").find("img").prop("scr","<%=path %>/resources/images/productPersonalImages/"+data.pic);
dialog.tipsPop('ok-pop','操作成功');
personPic = data.pic;
$(".tou a").html('<img src="<%=path %>/resources/images/productPersonalImages/'+data.pic+'" width="40" height="40"/>');
}
}
});
}else{
dialog.tipsPop('ero-pop','请先裁切图片');
return false;
}
},
cancel:function(){},
onclose:function(){
$("#img").val('');
$("#photoForm")[0].reset(); //重置表单
}
});
popDialog.showModal();
var options = {
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: '<%=path%>/resources/images/avatar.png'
};
var cropper = $('.imageBox').cropbox(options);
$('#fileField').on('change', function(){
var picFile = document.querySelector("input[name=fileField]").files[0];
var fileName = picFile.name;
if(fileName.lastIndexOf('jpg') === -1 && fileName.lastIndexOf('png') === -1){
dialog.tipsPop('ero-pop','文件格式不正确,请选择jpg或png格式');
$("#photoForm")[0].reset();
return false;
}
var fileSize = picFile.size;
if(fileSize > 2*1024*1024){
dialog.tipsPop('ero-pop','图片过大,请上传2M以内的图片');
$("#photoForm")[0].reset();
return false;
}
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();
$("#img").val(img);
$('.mt10').html('');
$('.mt10').append('<img src="'+img+'" align="absmiddle" style="width: 200px;height: 200px;">');
});
$('#btnZoomIn').on('click', function(){
cropper.zoomIn();
});
$('#btnZoomOut').on('click', function(){
cropper.zoomOut();
});
}
</script>
<div class="popup" id="personPhoto">
<form method="post" enctype="multipart/form-data" id="photoForm">
<div class="changePhoto">
<div class="f_left changePhoto_l">
<div class="changePhoto_area imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none"></div>
</div>
<div class="file_box">
<input type="file" accept="image/png,image/jpeg" name="fileField" class="file-field" style="display: none;" id="fileField" size="28"/>
<label for="fileField" class="lead" style="cursor: pointer;">上传</label>
<input type="button" id="btnZoomOut" class="leadNew" style="cursor: pointer;" value="-" />
<input type="button" id="btnZoomIn" class="leadNew" style="cursor: pointer;" value="+" />
<input type="button" id="btnCrop" class="leadNew" style="cursor: pointer;" value="裁切"/>
<!-- <input type="submit" name="submit" class="lead" value=""> -->
</div>
</div>
<div class="f_right changePhoto_r">
<p>预览</p>
<div class="pic mt10" style="width: 200px;height: 200px;"></div>
</div>
</div>
</form>
</div>
<input type="hidden" id="img" value=""/>
后台代码:
@RequestMapping("/student/saveImage")
@ResponseBody
public Map<String,Object> saveImageBlob(String blob ,Integer id,String role,HttpServletRequest request) throws IOException{
Map<String,Object> map = new HashMap<String, Object>();
String img = blob.replaceAll("data:image/png;base64,", "");
//保存图片
BASE64Decoder decoder = new BASE64Decoder();
ByteArrayInputStream stream = null;
FileOutputStream out = null;
String path = request.getServletContext().getRealPath("/") + IMAGEPATH;
String fileName = "";
File f = null;
try {
fileName = FileUtils.createUniqueFileName(".png");
byte[] b = decoder.decodeBuffer(img);//转码得到图片数据
stream = new ByteArrayInputStream(b);
String filePath = path + fileName;
f = new File(filePath);
out = new FileOutputStream(f);
byte[] buffer = new byte[1024 * 1024];
int length = 0;
while ((length = stream.read(buffer)) != -1) {
out.write(buffer, 0, length);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
if (stream != null) {
try {
stream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (out != null) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
SysUser sysUser = new SysUser();
sysUser.setId(id);
sysUser.setPicture(f.getName());
String str = sysUserService.changeSysUserInfor(sysUser);
if (StringUtils.equals(str, ApplicationConstants.SUCCESS)) {
SysUser user = (SysUser) SecurityUtils.getSubject().getSession().getAttribute(ApplicationConstants.LOGIN_USER);
user.setPicture(sysUser.getPicture());
}
map.put("msg", str);
map.put("pic", sysUser.getPicture());
return map;
}