正文
ajax实现文件上传，多文件上传，追加参数
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.html部分实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form id= "uploadForm">
<p >指定文件名： <input type="text" name="filename" value= ""/></p >
<p >上传文件： <input type="file" name="file1" id="file1" multiple="multiple" /></p>
<p >上传文件： <input type="file" name="file2" id="file2" /></p>
<p >上传文件： <input type="file" name="file3" id="file3" /></p>
<input type="button" value="上传" onclick="doUpload()" />
</form>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
//获取token
var token = parent.window.document.getElementById("token").value; function doUpload() {
var formData = new FormData();
formData.append("token", token);
formData.append("file1", $('#file1')[0].files[0]);
formData.append("file2", $('#file2')[0].files[0]);
formData.append("file3", $('#file3')[0].files[0]);
$.ajax({
url: 'bookController/uploadMult' ,
type: 'post',
data: formData,
cache: false,
processData: false,
contentType: false,
async: false
}).done(function(res) { }).fail(function(res) { });
}</script>
</body>
</html>
2.后台部分:
多文件上传方式处理:
@RequestMapping(value = "/uploadMult", method = RequestMethod.POST)
@ResponseBody
public String uploadMult(HttpServletRequest request) {
// 转型为MultipartHttpRequest：
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 获得文件：
List<MultipartFile> files = multipartRequest.getFiles("file1");
List<MultipartFile> files2 = multipartRequest.getFiles("file2");
List<MultipartFile> files3 = multipartRequest.getFiles("file3"); if (files.isEmpty()) {
return "false";
} String path = "F:/test"; for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
int size = (int) file.getSize();
System.out.println(fileName + "-->" + size); if (file.isEmpty()) {
return "false";
} else {
File dest = new File(path + "/" + fileName);
if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
dest.getParentFile().mkdir();
}
try {
file.transferTo(dest);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return "false";
}
}
}
return "true";
}
单个文件上传方式处理:
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
String contentType = file.getContentType();
String fileName = file.getOriginalFilename();
/*
* System.out.println("fileName-->" + fileName);
* System.out.println("getContentType-->" + contentType);
*/
String filePath = request.getSession().getServletContext().getRealPath("upload/");
try {
uploadFile(file.getBytes(), filePath, fileName);
} catch (Exception e) {
// TODO: handle exception
}
// 返回json
System.out.println("上传成功!");
return "true";
} public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
File targetFile = new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath + fileName);
out.write(file);
out.flush();
out.close();
}
springboot文件上传参数配置：在application.properties文件中配置上传大小限制：
#文件上传
#Spring Boot 1.3.x或者之前multipart.maxFileSize=800Kb
multipart.maxRequestSize=1000Mb#Spring Boot 1.4.x或者之后spring.http.multipart.maxFileSize=100Mb
spring.http.multipart.maxRequestSize=1000Mb#maxFileSize 是单个文件大小
#maxRequestSize是设置总上传的数据大小
