image.png
HTML部分：
现在有一个table，table的第一个td中是一个图片上传的input框
<td id="iconTd" rowspan="4" style="background-image: url('<%=basePath%>/static/images/niu.jpg');
background-size: 100% 100%">
<input type="file" id="file" name="imgFile" accept="image/jpeg,image/jpg,image/png" onchange="showIncon(this)">
</td>
td的背景图片放置一张默认图片，这里我放了一张牛的图片
input框中添加属性accept="image/jpeg,image/jpg,image/png"来限制只能上传这三种格式的图片文件，想要添加更多类型可以自行百度相关的MIME格式添加进去
input框添加了onchange方法，图片更换时被调用
table是放在一个form中的,form的属性如下：
<form id="stuForm" method="post" enctype="multipart/form-data" action="<%=basePath%>/student/addStudent">
form一定要设置enctype="multipart/form-data"
CSS部分：
这里我为input框添加了样式{opacity:0;width:100%;height:100%}，既实现了input上传文件按钮的隐藏，又可以点击整个td区域都能弹出上传窗口
JS部分
showIncon(file)方法：
function showIncon(file){
var r= new FileReader();
//由于jQuery对象没有 files 属性，此处要使用原生js获取，或者$("#file")[0].files;
f = document.getElementById('file').files[0];
//限制上传图片大小在2M以内，超过2M则显示默认图片，并清空input框的值
if(f.size>2048000){
alert( "请上传小于2M的图片");
$("#iconTd").css("background-image","url('<%=basePath%>/static/images/niu.jpg')");
file.value = "";
}else{
r.readAsDataURL(f);
r.onload=function (e) {
$("#iconTd").css("background-image","url(" + this.result + ")");
};
}
}
上传到服务器上：
表单提交后进入后台，Controller部分：
@RequestMapping(value="student/addStudent",method = RequestMethod.POST)
@ResponseBody
public String addStudent(HttpServletRequest req, Model model) throws IOException {
//图片上传到服务器
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(
req.getSession().getServletContext());
commonsMultipartResolver.setDefaultEncoding("utf-8");
MultipartHttpServletRequest multipartRequest = commonsMultipartResolver
.resolveMultipart(req);
MultipartFile multipartFile = multipartRequest.getFile("imgFile");
//获取绝对路径 并在指定相应目录创建File对象
String contextPath = req.getSession().getServletContext().getRealPath("/");
String fileName = "xxx.jpg";
File imgFile = new File(contextPath+"/static/images/"+fileName);
//上传文件
multipartFile.transferTo(imgFile);
return "要跳转的路径";
}
