jsp页面
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<title>文件上传</title>
</head>
<body>
<h1>ajax异步上传文件</h1>
<input type="file" id="upload">
<button id="but"onclick="oneUpload()" >上传</button>-->
<h1>ajax异步多文件上传</h1>
<form id="fileForm">
<input type="file" name="files" multiple="multiple" >
<input type="file" name="files" multiple="multiple" >
<input type="button" id="btn_add_file" value="上传附件" onclick="upload_files()">
</form>
<script type="text/javascript">
//单文件上传
function oneUpload() {
var file = document.getElementById("upload").files[0];
var formData = new FormData();
formData.append("file", file);
$.ajax({
type: 'POST',
url: '${pageContext.request.contextPath}/oneUpload.do',
processData: false, //是否把上传的数据 处理为对象 默认为true
contentType: false, //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件
data:formData,
success: function (data) {
alert(data);
}
})
}
//多文件上传
function upload_files(){
var formData = new FormData($("#fileForm")[0]);
$.ajax({
type: 'POST',
url:'${pageContext.request.contextPath}/allUpload.do',
processData: false, //是否把上传的数据 处理为对象 默认为true
contentType: false, //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件
data:formData,
success: function (data) {
alert(data);
}
})
}
</script>
</body>
</html>
java后端代码
package com.zjn.controller;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
public class AjaxUpload {
/**
* 单文件上传
*
* @param file
* @param request
* @return
*/
@RequestMapping("/oneUpload")
@ResponseBody
public String oneUploadFile(MultipartFile file, HttpServletRequest request) {
String path = "D://图片/img/";
//String data = sft.format(new Date());
String fileName = file.getOriginalFilename();
String lastStr = fileName.substring(fileName.lastIndexOf("."));
if (".txt".equals(lastStr)) {
return "文件格式不正确";
}
;
File file1 = new File(path);
if (!file1.exists()) {
file1.mkdirs();
}
String newName = UUID.randomUUID().toString().replace("-", "") + fileName;
try {
file.transferTo(new File(file1, newName));
String url = path + "/" + newName;
System.out.println(url);
return url;
} catch (IOException e) {
e.printStackTrace();
}
//文件存储路径
return "error";
}
/**
* 多文件上传
*
* @param list
* @param request
* @return
*/
@RequestMapping("/allUpload")
@ResponseBody
public String allUploadFile(@RequestParam(value = "files") List<MultipartFile> list, HttpServletRequest request) {
System.out.println("list====="+list);
String path = "D://图片/allImg/";
for (MultipartFile file : list) {
String fileName = file.getOriginalFilename();
String lastStr = fileName.substring(fileName.lastIndexOf("."));
;
File file1 = new File(path);
if (!file1.exists()) {
file1.mkdirs();
}
String newName = UUID.randomUUID().toString().replace("-", "") + fileName;
try {
file.transferTo(new File(file1, newName));
String url = path+ "/" + newName;
System.out.println(url);
} catch (IOException e) {
e.printStackTrace();
}
}
//文件存储路径
return "success";
}
}