首先我们在html中写一个显示头像的div。这里需要强调一点 为什么把img和input放到label下，因为我们需要隐藏这个input 但是隐藏后我们很难找到它的位置，于是我们将图片跟它放在一起，起到点击图片就能弹出相册的效果。
<div id="avatar" class="boxlist2 t1">
<label class="btn-file" data-role="add">
<img id = "#avatarImg" src="${user.avatar }" width="220" height="220" alt=""/>
<input id="avatarFile" accept="image/*" name="avatarFile" type="file" style="display:none;" />
</label>
</div>
定义控件的点击事件以及图片地址变动后的监听事件
$(function(){
var inputFile = document.getElementById('avatarFile')
// 监听文件改变
inputFile.addEventListener('click', function() {this.value = null;}, false);
inputFile.addEventListener('change', readData, false);
})
文件改变响应函数
// 文件改变响应
function readData(evt) {
evt.stopPropagation();
evt.preventDefault();
var file = evt.dataTransfer !== undefined ? evt.dataTransfer.files[0] : evt.target.files[0];
if (!file.type.match(/image.*/)) {return;}
var reader = new FileReader();
reader.onload = (function() {
return function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = (function() {
var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // canvas清屏
//重置canvans宽高 canvas.width = img.width; canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将图像绘制到canvas上
canvas.toDataURL("image/jpeg");//必须等压缩完才读取canvas值，否则canvas内容是黑帆布
cropAndUploadImage(canvas.toDataURL("image/jpeg"));
});
}
})(file);
reader.readAsDataURL(file);
}
请求后台ajax，这里需要注意的是压缩后的突变是base64码，有个前缀我们需要把它截取掉。这样传到服务端才能正常解码。
function cropAndUploadImage(base64){
var b64 = base64.split(",")[1];
var load = layerLoad();
$.ajax({
url: 'User!uploadImg.action',
type: "post",
data:{
photo : b64,
},
dataType: 'json',
success:function(data) {
if(data.success){
setTimeout(function(){
window.location.reload();
},1000);
}else {
layer.close(load);
layerOpen(date.error);
}
},
error : function() {
// view("异常！");
layer.close(load);
layerAlert("图片上传超时！");
}
})
}
服务端代码
/**
* 上传图片
* @return
*/
public String uploadImg() {
JSONObject info = new JSONObject();
try {
getRequest().setCharacterEncoding("utf-8");
getResponse().setCharacterEncoding("utf-8");
getResponse().setContentType("text/html");
int userid = (int)getSession().get("userid");
String path = "/image/user/";
// 对base64数据进行解码 生成 字节数组，不能直接用Base64.decode（）；进行解密
byte[] photoimg = new BASE64Decoder().decodeBuffer(photo);
for (int i = 0; i < photoimg.length; ++i) {
if (photoimg[i] < 0) {
// 调整异常数据
photoimg[i] += 256;
}
}
//byte[] photoimg = Base64.decode(photo);//此处不能用Base64.decode（）方法解密，我调试时用此方法每次解密出的数据都比原数据大 所以用上面的函数进行解密，在网上直接拷贝的，花了好几个小时才找到这个错误（菜鸟不容易啊）
File file = new File(getRequest().getServletContext().getRealPath(path), userid + ".JPEG");
if (!file.exists()) {
file.createNewFile();
}
FileOutputStream out = new FileOutputStream(file);
out.write(photoimg);
out.flush();
out.close();
/**
* 更改数据库图片地址
*/
// 图片地址存入数据库 这里就不详细介绍了
info.accumulate("success", true);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
info.accumulate("success", false).accumulate("error", "图片太大，设置失败");
}
super.responsePrint(info.toString());
return null;
}
|
|
收藏
淘帖
踩
