上传图片的请求方式一般分为两种：
第一种是通过表单中的action跳转。
第二种是通过Ajax异步传输。
本篇文章使用的是第二种方式。
pom.xml中添加依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
springmvc的配置文件
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
<!-- 上传最大大小5M-->
<!-- <property name="maxUploadSize" value="5242440"></property>-->
<!--<property name="uploadTempDir" value="/upload"></property>-->
</bean>
前台html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传与下载</title>
<script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="uploadForm" enctype="mutipart/form-data">
文件:<input type="file" name="fileName"/>
</form>
<button id="upload">上传文件</button>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);//序列化表单，将上传类型设置为文件对象
$.ajax({
type: 'post',
url: "/upload.action",
data: formData,
cache: false,//文件不设置缓存
processData: false,//数据不被转换为字符串
contentType: false,//上传文件时使用，避免 JQuery 对其操作
}).success(function (data) {
alert("上传成功");
}).error(function () {
alert("上传失败");
});
});
});
</script>
</body>
</html>
action文件
@RequestMapping(value = "/upload.action")
public @ResponseBody
String update(@RequestParam(value = "fileName", required = false) MultipartFile file, HttpServletRequest request) throws IOException {
String path = request.getServletContext().getRealPath("upload");//文件的上传路径
System.out.println("path" + path);
String fileName = file.getOriginalFilename();//获取文件名
System.out.println("文件名" + fileName);
String path1[] = path.split("\\\\");//对于特殊字符的分隔| ^ $ * . ( ) \ /等都是正则表达式的一部分，只能通过前面加上\\进行转义。注意\要用三个\\\，也就是split（“\\\\”）
String path2 = path1[path1.length - 1];//截取图片所在的文件夹名称
File dir = new File(path, fileName);//将指定文件上传到指定的目录下
/**
* 如果文件夹不存在，自动创建该文件夹
*/
if (!dir.exists()) {
dir.mkdirs();
}
//MultipartFile自带的解析方法
if (!file.isEmpty()) {
file.transferTo(dir);
return path2 + '\\' + fileName;
} else {
System.out.println("空文件");
return "不允许上传空文件";
}
}
完整的代码已经上传至github,写的不好，欢迎指教。
网友评论