1. 后端示例代码:
@RequestMapping(value="/upload",method=RequestMethod.POST)
public List<File> uploadFile(MultipartHttpServletRequest request) throws IOException{
//首先定义了一个List<File>用于保存所有文件上传后所在位置,以便后续做出一系列处理。
List<File> uploadFileList = new ArrayList<File>();
//拿到name为files的文件上传表单内容(支持多文件)
List<MultipartFile> files = request.getFiles("files");
//拿到name为test的表单项
String test = request.getParameter("test");
//获取项目真实路径
String path = request.getSession().getServletContext().getRealPath("");
//指定temp文件夹
String tmpPath = path + File.separator + "temp";
File filePath = new File(tmpPath);
if(!filePath.exists() || !filePath.isDirectory()){
filePath.mkdirs();
}
//上传等同于输入输出流的正常操作,拿到输入流的bytes往输出流送
for (MultipartFile multipartFile : files) {
if(!multipartFile.isEmpty()){
File tempFile = new File(filePath + File.separator + multipartFile.getOriginalFilename());
FileOutputStream fos = new FileOutputStream(tempFile);
BufferedOutputStream bos = new BufferedOutputStream(fos);
bos.write(multipartFile.getBytes());
bos.close();
fos.close();
uploadFileList.add(tempFile);
}
}
return uploadFileList;
}
注:以上示例可以混合读取表单多文件以及普通字段,并拿到一个文件的真实路径List。
2. 前端示例代码
表单同步方式:
<form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data" id="form"> <input type="text" name="test" id="test" value="" /> <input type="file" name="files" id="files" value="" multiple="multiple" /> <input type="submit" value="上传"/> </form>
form必须标注enctype属性为multipart/form-data,如需支持多文件,可以设置file控件的multiple属性为multiple(H5支持)。
ajax异步方式:
var formData = new FormData(document.getElementById("form")); $.ajax({ url: 'http://localhost:8080/upload', type: 'POST', data: formData, async: true, cache: false, contentType: false, processData: false, success: function (returndata) { alert("上传成功:"+returndata); } });