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 "要跳轉的路徑";
}
