jQuery Ajax文件上传:所需的MultipartFile参数'file'不存在
问题内容:
背景
我正在Java8上构建Spring MVC
Web应用程序,并在tomcat8上运行它。除了这个信息,Spring版本是4.1.6.RELEASE
和Servlet 3.1
我给你的环境背景,因为有些问题的解决者提到的版本是与此相关的错误。
我的密码
下面是 root-context.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="20000000" />
</bean>
下面是我的 FileController
@Controller
public class FileController {
private static final Logger logger = LoggerFactory.getLogger(FileController.class);
private static final String UploadFolder = "Files";
@RequestMapping("/uploadFile")
@ResponseBody
public void uploadFile(@RequestParam("file") MultipartFile file, HttpServletResponse response) throws IOException {
String fileName = "";
PrintWriter script = response.getWriter();
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
fileName = FilenameUtils.getName(file.getOriginalFilename());
String extension = FilenameUtils.getExtension(fileName);
String base = System.getProperty("catalina.home");
File dir = new File(base + File.separator + UploadFolder);
if (!dir.exists()) {
dir.mkdirs();
}
Date date = new Date();
String year = DateTimeUtility.getInstance().getYear(date);
String month = DateTimeUtility.getInstance().getMonth(date);
String uniqueFileName = DateTimeUtility.getInstance().getDateTime(date);
File dateDir = new File(base + File.separator + UploadFolder + File.separator + year + File.separator + month);
if (!dateDir.exists()) {
dateDir.mkdirs();
}
File uploadedFile = new File(dateDir.getAbsolutePath() + File.separator + uniqueFileName + WordCollections.UNDERBAR + fileName);
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(uploadedFile));
stream.write(bytes);
stream.close();
logger.info("Server File Location = " + uploadedFile.getAbsolutePath());
script.write("Uploading file was successful");
} catch (Exception e) {
logger.error("Server failed to upload this file : " + fileName);
script.write("Uploading file was failed");
}
} else {
logger.error("The requested file is empty");
script.write("Uploading file was empty");
}
}
下面是我的表格
<form id="upload" method="POST" action="/uploadFile.json" enctype="multipart/form-data">
File to upload: <input type="file" name="file" onchange="MyScript.uploadFile(this);"><br />
<input type="submit" value="Upload"> Press here to upload the file!
</form>
奇怪的事情
是通过上传文件form submit
没有问题。它像一个魅力!我没有什么可抱怨的form submit
!
但是此AJAX无效
$.ajax({
type: "POST",
url: "/uploadFile",
data: {name: "file", file: inputElement.files[0]},
contentType: 'multipart/form-data;boundary=----WebKitFormBoundary0XBBar2mAFEE8zbv',
processData: false,
cache: false,
/*beforeSend: function(xhr, settings) {
xhr.setRequestHeader("Content-Type", "multipart/form-data;boundary=gc0p4Jq0M2Yt08jU534c0p");
settings.data = {name: "file", file: inputElement.files[0]};
},*/
success: function (result) {
if ( result.reseponseInfo == "SUCCESS" ) {
} else {
}
},
error: function (result) {
console.log(result.responseText);
}
});
当我尝试通过上述ajax调用上传文件时,服务器抛出此错误。
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.DispatcherServlet - DispatcherServlet with name 'appServlet' processing POST request for [/uploadFile]
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping - Looking up handler method for path /uploadFile
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping - Returning handler method [public void com.company.web.controller.FileController.uploadFile(org.springframework.web.multipart.MultipartFile,javax.servlet.http.HttpServletResponse) throws java.io.IOException]
2015-04-07 18:37:30 DEBUG: org.springframework.beans.factory.support.DefaultListableBeanFactory - Returning cached instance of singleton bean 'fileController'
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.mvc.method.annotation.ExceptionHandlerExceptionResolver - Resolving exception from handler [public void com.company.web.controller.FileController.uploadFile(org.springframework.web.multipart.MultipartFile,javax.servlet.http.HttpServletResponse) throws java.io.IOException]: org.springframework.web.bind.MissingServletRequestParameterException: Required MultipartFile parameter 'file' is not present
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.mvc.annotation.ResponseStatusExceptionResolver - Resolving exception from handler [public void com.company.web.controller.FileController.uploadFile(org.springframework.web.multipart.MultipartFile,javax.servlet.http.HttpServletResponse) throws java.io.IOException]: org.springframework.web.bind.MissingServletRequestParameterException: Required MultipartFile parameter 'file' is not present
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver - Resolving exception from handler [public void com.company.web.controller.FileController.uploadFile(org.springframework.web.multipart.MultipartFile,javax.servlet.http.HttpServletResponse) throws java.io.IOException]: org.springframework.web.bind.MissingServletRequestParameterException: Required MultipartFile parameter 'file' is not present
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'appServlet': assuming HandlerAdapter completed request handling
2015-04-07 18:37:30 DEBUG: org.springframework.web.servlet.DispatcherServlet - Successfully completed request
浏览器说类似…
<body><h1>HTTP Status 400 - Required MultipartFile parameter 'file' is not present</h1><div class="line"></div><p><b>type</b> Status report</p><p><b>message</b> <u>Required MultipartFile parameter 'file' is not present</u></p><p><b>description</b> <u>The request sent by the client was syntactically incorrect.</u></p><hr class="line"><h3>Apache Tomcat/8.0.20</h3></body></html>
关键是 不存在Required MultipartFile参数’file’ 和 400 Bad Request 。
我已经用这个关键字在Google上进行了搜索,并尽我所能进行了尽可能多的搜索,就像在发布问题之前一样, stackoverflow
我真的不明白为什么只有ajax
这里不起作用!提交上传时效果很好。
问题答案:
试试这样:
var fd = new FormData();
fd.append( "file", $("input[name=file]").files[0]);
$.ajax({
type: "POST",
url: "/uploadFile",
data: fd,
contentType: false,
processData: false,
cache: false,
/*beforeSend: function(xhr, settings) {
xhr.setRequestHeader("Content-Type", "multipart/form-data;boundary=gc0p4Jq0M2Yt08jU534c0p");
settings.data = {name: "file", file: inputElement.files[0]};
},*/
success: function (result) {
if ( result.reseponseInfo == "SUCCESS" ) {
} else {
}
},
error: function (result) {
console.log(result.responseText);
}
});