在做javaweb项目时，有时偶尔会用到用户头像上传和预览功能，百度了很多资料，发现学习成本比较高，要么是理解起来有点困难，必须加以深入研究才能吃透，但花费时间花费精力。要么是效果不尽人意。因此本人花了一些时间从前台到后台都是自己手写的，希望大家能满意！
头像上传即文件上传采用springmvc文件上传方案来解决，头像上传通常也需要预览功能，预览功能则通过js代码实现。
前端页面html代码：
<div id="box-1">
<img id="show-img" src="" alt=""/>
</div>
<div id="box-2">
<form action="/test_springmvc/user/getFile_2" method="post" enctype="multipart/form-data">
用户名：<input type="text" name="username"/><br>
<input id="choose-file" type="file" name="file" accept="image/*"/>
<input type="submit" value="提交"/>
</form>
</div>前端页面css代码：
<style type="text/css">
#box-1{
width: 200px;
height: 200px;
border: 1px solid gray;
border-radius: 50%;
}
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
</style>前端页面js代码：
还要先引入jquery文件
<script type="text/javascript">
$(function(){
//在input file内容改变的时候触发事件
$('#choose-file').change(function(){
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#choose-file').get(0).files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#show-img').get(0).src = e.target.result;
}
});
//隐藏input file控件
$("#choose-file").hide();
$("#box-1").bind('click',function(){
//当点击头像框时，就会弹出文件选择对话框
$("#choose-file").click();
});
});
</script>后台controller方法代码：
/**
* springmvc文件上传：基于servlet3.0的文件上传
*/
@RequestMapping("/getFile")
@ResponseBody
public String getFile(String username,Part file) {
//将文件写到d盘根目录
try {
String s=file.getHeader("Content-Disposition");
//分析字符串，获取上传的文件名称
s=s.substring(0,s.length()-1);
String fileName=s.substring(s.lastIndexOf("\"")+1, s.length());
//保存文件
file.write("E://TestAll/"+fileName);
//清楚上传的临时文件
file.delete();
} catch (IOException e) {
e.printStackTrace();
}
return "文件上传成功！";
}效果截图：
未选择头像时：
点击头像框，弹出文件选择对话框，选择一张图片后：
点击提交按钮，即可将头像上传到服务器！
