MVC單文件與多文件上傳學習筆記(2019-11-04):
pom文件依賴:
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.1</version>
</dependency>
配置文件(springmvc.xml):
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
<property name="maxUploadSize" value="104857600"></property>
</bean>
單文件上傳:
頁面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>個人文件上傳test網站</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<body>
<form id="inputForm">
<input type="file" name="updateUrl" onchange="updatefile()">
</form>
<div>
<table>
<tr>
<td id="tset">
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function updatefile() {
var formData = new FormData($("#inputForm")[0]);
$.ajax({
url: "/test/updatefile",
async: false,
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (updateVersionFile) {
$("#tset").html("<a href=\""+updateVersionFile+"\">點擊查看</a>");
}
});
}
</script>
</html>
後端代碼:
@PostMapping("/updatefile")
public String getlist(@RequestParam(value = "updateUrl", required = false) MultipartFile multipartFile){
InputStream inputStream=null;
try {
inputStream = multipartFile.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
return url;
}
單獨使用<input type="file" name="updateUrl" onchange="updatefile()"> 上傳方式不用表單
function updatefile() {
var formData = new FormData();
var file = $("#updateUrl")[0];
formData.append("updateUrl",file.files[0]);
$.ajax({
url: "/updatefile",
async: false,
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (updateVersionFile) {
$("#tset").html("<a href=\""+updateVersionFile+"\">點擊查看</a>");
}
});
}
多文件上傳:
頁面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>個人文件上傳test網站2</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<body>
<input type="file" name="updateUrl" id="updateUrl1">
<input type="file" name="updateUrl" id="updateUrl2">
<input type="file" name="updateUrl" id="updateUrl3">
<button onclick="updatefile()">點擊多文件上傳</button>
</body>
<script type="text/javascript">
function updatefile() {
var formData = new FormData();
formData.append("updateUrl",$("#updateUrl1")[0].files[0])
formData.append("updateUrl",$("#updateUrl2")[0].files[0])
formData.append("updateUrl",$("#updateUrl3")[0].files[0])
$.ajax({
url: "/updatefile2",
async: false,
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (result) {
alert("上傳成功!"+result);
}
});
}
</script>
</html>
後端使用數組接收:
@PostMapping("/updatefile2")
public String multiFile(@RequestParam(value = "updateUrl", required = false) MultipartFile[] multipartFile) throws IOException {
for (MultipartFile file : multipartFile) {
System.out.println(file.getSize());
System.out.println(file.getOriginalFilename());
System.out.println(file.getInputStream());
}
return "success";
}
頁面也可以使用表單提交:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="${pageContext.request.contextPath }/multifile"
method="post" enctype="multipart/form-data">
選擇文件1：<input type="file" name="myfile"><br>
文件描述1：<input type="text" name="description"><br />
選擇文件2：<input type="file" name="myfile"><br>
文件描述2：<input type="text" name="description"><br />
選擇文件3：<input type="file" name="myfile"><br>
文件描述3：<input type="text" name="description"><br />
<input type="submit" value="提交">
</form>
</body>
</html>
