一、引入js,配置依赖
引入ajaxfileupload.js
pom.xml
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>修改spring配置文件
<!--文件上传-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="104857600"/>
<property name="maxInMemorySize" value="4096"/>
<property name="defaultEncoding" value="UTF-8"/>
</bean>二、编写前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/ajaxFileUpLoad.js"></script>
<script>
$(function(){
$("#submmit").click(function(){
// var name;
// var age;
var sex="男";
$.ajaxFileUpload({
url: "upload.do",
secureuri: false,
data: {
// name: name,
// age: age,
sex: sex
},
fileElementId: "img",
dataType: "JSON",
success:function (data,status) {
console.log("success");
},
error:function (data,status) {
console.log("error");
}
});
});
});
/**
* 预览本地图片
*/
function preImg(source, targetId) {
var url;
var imgPre = document.getElementById(targetId);
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 8
var ieImg=document.getElementById("ieImg");
ieImg.style.display="block";
source.select();
path = document.selection.createRange().text;
$(ieImg).css({"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"});
}
else
{
url = window.URL.createObjectURL(source.files.item(0));
imgPre.style.display="block";
}
imgPre.src = url;
}
</script>
<body>
<div>
<form>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>姓名：</td>
<td><input id="name"/></td>
<td rowspan="3">头像:</td>
<td rowspan="3">
<div id="uploadForm" Style="width:60px;display: inline-block;margin-right: 0px">
<img id="imgPre" name="imgPre" Style="cursor: pointer;" src="" onerror="this.style.display='none'" width="60px" height="60px" />
<div id="ieImg" style="overflow:hidden;display:none;width:60px;height:60px"></div>
<input type="file" style="display: none;" name="img" id="img" onchange="preImg(this,'imgPre');" />
<input type="button" id="btn" Style="width:60px;" value="选择" onclick="img.click()" />
</div>
</td>
</tr>
<tr>
<td>性别:</td>
<td><input id="sex"/></td>
</tr>
<tr>
<td>年龄:</td>
<td><input id="age"/></td>
</tr>
<tr>
<td colspan="4" style="text-align: center;" >
<input type="button" id="submmit" value="提交"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>三、后端控制层代码
@RequestMapping("upload.do")
@ResponseBody
public void upload(HttpServletRequest request, HttpServletResponse response,String sex, @RequestParam("img")MultipartFile img) {
String path=request.getServletContext().getRealPath("/Upload");
if(!img.isEmpty()){
Calendar now = Calendar.getInstance();
String FileName=""+now.get(Calendar.YEAR)+(now.get(Calendar.MONTH)+1)+now.get(Calendar.DAY_OF_MONTH)+now.get(Calendar.HOUR_OF_DAY)+
now.get(Calendar.MINUTE)+now.get(Calendar.SECOND)+now.get(Calendar.MILLISECOND)+".png";
File filePath=new File(path);
//判断路径是否存在
if(!filePath.exists())filePath.mkdirs();
try{
img.transferTo(new File(filePath+"/"+FileName));
response.getWriter().print("success");
}catch (IOException e){
e.printStackTrace();
}catch (IllegalStateException e){
e.printStackTrace();
}
}
}