在pom.xml中引入依赖配置
<!-- 文件上传 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.5</version>
</dependency>
在springMVC配置文件中添加如下配置
<!-- springMVC文件上传 -->
<!-- 定义文件上传解析器 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
<property name="maxUploadSize">
<value>32505856</value><!-- 上传文件大小限制为31M,31*1024*1024 -->
</property>
<property name="maxInMemorySize">
<value>4096</value>
</property>
</bean>
Jsp页面表单:
在onclick方法中传入上传文件序号,从0开始,表示上传组件在Martipart[]数组中的序号
<form action="<%=editMemberUrl%>" id="myform" method="post"
enctype="multipart/form-data" class="form-horizontal">
<div class="form-group" id="passwordDiv">
<label class="col-md-2 control-label" for="password">上传图像:</label>
<div class="col-md-5">
<input class="" type="file" name="file" /> <input type="hidden"
name="pic1" id="coverImg1" value="${member.pic1 }" /> <input
type="button" value="上传" onclick="**upload(0)**" /> <img
id="coverImg2" src="${member.pic1 }"
style="width: 50px; height: 50px;" />
</div>
</div>
<div class="form-group" id="passwordDiv">
<label class="col-md-2 control-label" for="password">上传图像:</label>
<div class="col-md-5">
<input class="" type="file" name="file" /> <input type="hidden"
name="pic2" id="infoImg1" value="${member.pic2 }" /> <input
type="button" value="上传" onclick="**upload(1)**" /> <img id="infoImg2"
src="${member.pic2}" style="width: 50px; height: 50px;" />
</div>
</div>
</form>
使用jstl标签:
<c:set var="ctx" value="${pageContext.request.contextPath }"/>
添加ajax请求
<script>
//id为上传控件的序号,从0开始
function upload(id) {
alert("开始上传文件!")
var formData = new FormData(document.getElementById("myform"));
$.ajax({
//通过可变参数,传递多个文件上传对象,id从0开始
url : "${ctx}/file/upload2/" + id + ".html",
type : "post",
data : formData,
processData : false,
contentType : false,
success : function(data) {
if (data != "0") {
alert("上传成功:" + data);
if (id == 0) {
$('#coverImg1').val(data);
$('#coverImg2').attr("src", "${ctx}/" + data);
} else if (id == 1) {
$('#infoImg1').val(data);
$('#infoImg2').attr("src", "${ctx}/" + data);
}
} else {
alert("上传失败")
}
}
});
}
</script>
添加java代码:
@Controller
@RequestMapping("/file")
public class FileUploadController {
//json方式文件上传,上传多个文件,根据id从0开始,代表多个文件数组对象元素,返回json串
@RequestMapping("/upload2/{id}")
@ResponseBody
public String upLoad2(HttpServletRequest request, @PathVariable("id") int id, @RequestParam("file") MultipartFile[] upfile)
throws IllegalStateException, IOException {
//System.out.println("json文件上传" + upfile[id]);
System.out.println("json文件上传");
if (!upfile[id].isEmpty()) {
// 获取上传文件路径
String path = request.getSession().getServletContext().getRealPath("/upload");
System.out.println("json文件上传路径:" + path);
// 上传文件名
String filename = upfile[id].getOriginalFilename();
File filepath = new File(path, filename);
System.out.println("json:"+filepath);
// 将上传文件保存到一个目标文件当中
upfile[id].transferTo(filepath);
System.out.println("文件上传完成!");
// 保存文件信息
request.setAttribute("file", "upload" + File.separator + filename);
return "upload" + File.separator + filename;
}else {
return "0";
}
}
}