编辑头像功能

<div class="modal fade" id="userImgModal" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="gridSystemModalLabel">编辑头像</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="imageBox pull-left">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</div>
</div>
<div class="cropped pull-left"></div>
</div>
</div>
<div class="modal-footer">
<input type="file" id="upload-file" class="file">
<button type="button" id="btnZoomOut" class="btn btn-primary">-</button>
<button type="button" id="btnZoomIn" class="btn btn-primary">+</button>
<button type="button" id="btnCrop" class="btn btn-primary">剪切</button>
<button type="button" id="btnImgSubmit" class="btn btn-primary" disabled="disabled" onclick="updateUserPhoto()">保存</button>
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

<script type="text/javascript" src="../asset/js/cropbox.js"></script>
<script type="text/javascript">
$(function() {
var options = {
thumbBox : '.thumbBox',
spinner : '.spinner',
imgSrc : '${BASE}/asset/images/avatar.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();
$('.cropped').html('<img src="'+img+'" id="retImg">');
$("#btnImgSubmit").removeAttr("disabled");
});
$('#btnZoomIn').on('click', function() {
cropper.zoomIn();
});
$('#btnZoomOut').on('click', function() {
cropper.zoomOut();
});
// 输入数据到输入框启动保存按钮
$("input").keydown(function(e, previous) {
$("#save").removeAttr("disabled");
});
$("#save").click(function() {
$.post("${BASE}/iotcarveout/saveUser", {
'userId': $("#userId").val(),
'realName': $("#realName").val(),
'mailBox': $("#mailBox").val()
}, function(data) {
if (data == 'success') {
alert("保存成功");
} else {
alert("保存失败");
}
});
});
});
function updateUserPhoto(){
var name = $("#upload-file").val();
var names = name.split("\\");
name = names[names.length-1];
var imgbytes = $("#retImg").attr("src");

var userId = $("#userId").val();
$.post(getContextPath()+"/iotcarveout/modifyuserphoto", {
'name': name,
'imgbytes': imgbytes,
'userId': userId
}, function(data){
if (data != "") {
$("#imgfacecheck").attr("src", data);
// $("#facephotoaddr").val(data);

$('.cropped').html("");
$("#btnImgSubmit").attr("disabled", "disabled");
$('#userImgModal').modal("hide");
}
});
}
</script>

@Action("post:/iotcarveout/modifyuserphoto")
public Data matchModifyUserPhoto(Param param) throws Exception{
long userId = param.getLong("userId");
String name = param.getString("name");
String bytes = param.getString("imgbytes");
if(name == ""){
name = "default"+Math.random()+".jpg";
}else{
name = Math.random() + name;
}
int index = bytes.indexOf("base64");
String imgbytes= bytes.substring(index + 7);
//BASE64Decoder decoder = new sun.misc.BASE64Decoder();
//byte[] bytes1 = decoder.decodeBuffer(imgbytes);
byte[] bytes1 = org.apache.shiro.codec.Base64.decode(imgbytes);
for (int i = 0; i < bytes1.length; ++i) {
if (bytes1[i] < 0) {// 调整异常数据
bytes1[i] += 256;
}
}
String fileName = ConfigHelper.getAppAssetPath() + ConfigHelper.getString(InnovateConstant.innovateRoot)
+ "users/" +userId + "/" + name;
ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);
boolean isSuc = userService.updateUserPhoto(userId,name, bais, fileName);
if(isSuc) {
return new Data(fileName);
} else {
return new Data("");
}
}