需求背景:
页面上传一个文件到controller层,然后后台对文件进行处理。文件类型不限。
第一种:单纯的上传文件
页面功能展现:
第一步:首先需要两个jar
commons-fileupload-1.3.2.jar
commons-io-2.4.jar
版本不限:
pom文件中相应两个jar:
commons-io
commons-io
2.4
commons-fileupload
commons-fileupload
1.3
commons-iocommons-io2.4commons-fileuploadcommons-fileupload1.3
第二步:在spring-mvc.xml中配置
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
第三步:jsp页面代码
HTML>
数据生成选择一个文件:
function uploadFiles(){
// var uploadFile= $(‘#excelFile‘).get(0).files[0];
var uploadFile = new FormData($("#file")[0]);
console.log(uploadFile);
if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){
$.ajax({
url:‘/manage/fileupload/upload‘,
type:‘POST‘,
data:uploadFile,
async: false,
cache: false,
contentType: false, //不设置内容类型
processData: false, //不处理数据
success:function(data){
console.log(data);
alert(data.msg);
},
error:function(){
alert("上传失败!");
}
})
}else {
alert("选择的文件无效!请重新选择");
}
}
数据生成选择一个文件:
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objectshttps://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
第四步:controller层代码
packagecom.bigaoread.platform.web.manage.fileupload;
importjava.util.HashMap;
importjava.util.Map;
importjavax.servlet.http.HttpServletRequest;
importorg.slf4j.Logger;
importorg.slf4j.LoggerFactory;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.multipart.MultipartFile;
importcom.bigaoread.platform.service.fileupload.FileUploadService;
@Controller
@RequestMapping("/manage/fileupload")
publicclassFileUploadController {
privatestaticfinalLogger log = LoggerFactory.getLogger(FileUploadController.class);
@Autowired
privateFileUploadService fileUploadService;
@RequestMapping("/uploadPage")
publicString uploadPage() {
return"/manage/fileupload/uploadPage";
}
@RequestMapping(value="/upload", method=RequestMethod.POST)
@ResponseBody
publicMap uploadFile(HttpServletRequest request,
@RequestParamMultipartFile uploadFile){
Map resultMap = newHashMap<>();
resultMap = fileUploadService.uploadFile(uploadFile);
returnresultMap;
}
}package com.bigaoread.platform.web.manage.fileupload;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.bigaoread.platform.service.fileupload.FileUploadService;@Controller@RequestMapping("/manage/fileupload")public class FileUploadController { private static final Logger log = LoggerFactory.getLogger(FileUploadController.class); @Autowired private FileUploadService fileUploadService; @RequestMapping("/uploadPage") public String uploadPage() { return "/manage/fileupload/uploadPage"; } @RequestMapping(value="/upload", method=RequestMethod.POST) @ResponseBody public Map uploadFile(HttpServletRequest request, @RequestParam MultipartFile uploadFile){ Map resultMap = new HashMap<>(); resultMap = fileUploadService.uploadFile(uploadFile); return resultMap; }}
第五步:debug测试
上传文件 表结构原始.docx:
点击上传后,后台debug查看对象:
上传成功!
第二种,假如在前端还要传入其他参数时的做法
情景图(增加了一个下拉选):
这种多一个参数时,则需要修改两个地方就好了。
第一个是JSP:
如:
--%>
HTML>
数据生成1
2
3
4
5
选择一个文件:
function uploadFiles(){
var formData=newFormData();
var uploadFile= $(‘#excelFile‘).get(0).files[0];
// var uploadFile = new FormData($("#file")[0]);
var selectedId= $(‘#select‘).val();
formData.append("uploadFile",uploadFile);
formData.append("selectedId", selectedId);
console.log(uploadFile);
if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){
$.ajax({
url:‘/manage/fileupload/upload‘,
type:‘POST‘,
data:formData,
async: false,
cache: false,
contentType: false, //不设置内容类型
processData: false, //不处理数据
success:function(data){
console.log(data);
alert(data.msg);
},
error:function(){
alert("上传失败!");
}
})
}else {
alert("选择的文件无效!请重新选择");
}
}
--%>
数据生成选择一个文件:
controller代码:
packagecom.bigaoread.platform.web.manage.fileupload;
importjava.io.IOException;
importjava.util.HashMap;
importjava.util.Map;
importjavax.servlet.http.HttpServletRequest;
importorg.slf4j.Logger;
importorg.slf4j.LoggerFactory;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.multipart.MultipartFile;
importcom.bigaoread.platform.service.fileupload.FileUploadService;
@Controller
@RequestMapping("/manage/fileupload")
publicclassFileUploadController {
privatestaticfinalLogger log = LoggerFactory.getLogger(FileUploadController.class);
@Autowired
privateFileUploadService fileUploadService;
@RequestMapping("/uploadPage")
publicString uploadPage() {
return"/manage/fileupload/uploadPage";
}
@RequestMapping(value="/upload", method=RequestMethod.POST)
@ResponseBody
publicMap uploadFile(HttpServletRequest request,
@RequestParamMultipartFile uploadFile)throwsIOException{
String selectedId = request.getParameter("selectedId");
Map resultMap = newHashMap<>();
resultMap = fileUploadService.uploadFile(uploadFile);
returnresultMap;
}
}package com.bigaoread.platform.web.manage.fileupload;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.bigaoread.platform.service.fileupload.FileUploadService;@Controller@RequestMapping("/manage/fileupload")public class FileUploadController { private static final Logger log = LoggerFactory.getLogger(FileUploadController.class); @Autowired private FileUploadService fileUploadService; @RequestMapping("/uploadPage") public String uploadPage() { return "/manage/fileupload/uploadPage"; } @RequestMapping(value="/upload", method=RequestMethod.POST) @ResponseBody public Map uploadFile(HttpServletRequest request, @RequestParam MultipartFile uploadFile) throws IOException{ String selectedId = request.getParameter("selectedId"); Map resultMap = new HashMap<>(); resultMap = fileUploadService.uploadFile(uploadFile); return resultMap; }}
测试效果:
结果: