话不多说,直接上代码
<div id="head">
<img style="width: 80px;height: 80px" src="images/ckin.jpg" id="choice">
<input style="display: none" type="file" name="file" accept="image/*" value="0" id="changehead" onchange="read(this)">
</div>
//注意:由于在我的项目中,$符号与jQuery冲突了,所以这里我把$符号换成了jq
var jq = $.noConflict();
jq(function() {
// 点击修改头像
jq("#choice").click(function() {
// 点击input
jq("#changehead").click();
})
})
// 预览图片
function read(a) {
console.log(a.files);
var file = a.files[0];
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload = function(e) {
// alert('文件读取完成');
imgFile = e.target.result;
console.log(imgFile);
jq("#choice").attr('src', imgFile);
};
//正式读取文件
reader.readAsDataURL(file);
// FormData 是 Html5 新加进来的一个类,可以模拟表单数据
// 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件
var formdata=new FormData();
formdata.append("headimg",$("#changehead").get(0).files[0]);
formdata.append("nickname",name);
$.ajax({
url:"/upinfo",//后台路径
type:"POST",
data:formdata,
// 下面三个属性一定要加
processData:false,//对data参数进行序列化处理
contentType:false,//内容编码类型
cache:false,//不使用缓存
dataType:"json",
success:function(result){
if (result==1){
}
}
})
}
// 修改信息
@RequestMapping("/upinfo")
@ResponseBody
public int upinfo(HttpServletRequest request,
@RequestParam(value = "headimg", required = false) MultipartFile file,HttpSession session){
//路径
String path="";
try {
File path22 = new File(ResourceUtils.getURL("classpath:").getPath());
File upload = new File(path22.getAbsolutePath(),"static/header");
//header是上传文件夹
path=upload.getAbsolutePath();
}catch (FileNotFoundException e){
}
//获取文件名称
String filename=file.getOriginalFilename();
String geshi=filename.substring(filename.length()-4, filename.length());
System.out.println(filename);
//修改文件名称(当前时间,精确到毫秒),防止文件名重复
SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String formatStr =formatter.format(new Date());
filename=formatStr+"."+geshi;
File f=new File(path,filename);
if (!f.exists()) {
try {
f.createNewFile();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
try {
file.transferTo(f);
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//把信息存储到数据库,请换成自己的方法
int i=ls.upnick(nickname,"/header/"+filename,login.getUid());
if (i==1){
return 1;
}
return 0;
}