依赖
<!--文件上传-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
在 SpringMVC 中声明文件上传的组件
<!--文件上传-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--单位是字节-->
<property name="maxUploadSize" value="20971520"/>
</bean>
在前端写出文件上传的组件,要注意的是文件上传标签的 id 和 name 必须保持一致,如下图的:imgPath
<div class="input fileInput">
图片介绍 <input id="imgPath" type="file" name="imgPath">
<button id="file" type="button">上传图片</button>
<img id="fileimg" src="">
</div>
JQuery 代码
$(function (){
$("#file")[0].onclick = function (){
$.ajaxFileUpload({
url:"fileupload",
secureuri:false,
fileElementId:"imgPath",
dataType:"JSON",
success:function (resp){
alert(resp);
$("#fileimg").attr("src",resp);
}
})
}
})
/*
1.url 上传处理程序地址,动态资源地址
2.fileElementId 需要上传的文件域的ID,即<input type="file">的ID。
3.secureuri 是否启用安全提交,默认为false。
4.dataType 服务器返回的数据类型,可以为xml,script,json,html。
5.success 提交成功后自动执行的处理函数,参数resp就是服务器返回的数据。
6.error 提交失败自动执行的处理函数。
7.type 当要提交自定义参数时,这个参数要设置成post
*/
在后端写出控制器方法
PS:
后台接收文件的MultipartFile 的形参名必须与前端 <input type="file"> 的 id 名一致,否则会找不到上传文件
对于SpringMVC中的 Object 为返回值的控制器方法
若想返回对象,则使用:produces="application/json;charset=utf-8"
若想返回String,则使用:produces="text/html;charset=utf-8"
@Controller
public class ProductionController {
//异步Ajax文件上传
@ResponseBody
@RequestMapping(value="/fileupload",produces="text/html;charset=utf-8")
public Object fileUpload(MultipartFile imgPath, HttpServletRequest request,
HttpSession session) throws IOException {
//获取存储图片的用户级目录
String savePath = request.getServletContext().getRealPath("/") +
"static\\image_user\\" + session.getAttribute("username");
//若用户级目录不存在创建用户根目录
File userDirectory = new File(savePath);
if(! userDirectory.exists()){
userDirectory.mkdir();
}
//为文件起新名字
String fileName = FileUtils.getNewName(imgPath);
//将上传的文件转存到指定的用户级目录
imgPath.transferTo(new File(savePath,fileName));
//将路径返回到前端
return "static/image_user/"+session.getAttribute("username")+"/"+fileName;
}
}