java - Spring MVC 中的多个多部分文件 - Ajax

Question

我一直在尝试在我的 Java Spring MVC Web 应用程序中上传多个文件。我的表格为

<form id="commentForm" name="commentForm" role="form" method="post" enctype="multipart/form-data" action="${rc.getContextPath()}/module/support/save-item-comment">
//other form elements
<input type="file"  name="fileUpload" multiple/>
 <button type="submit" class="btn btn-primary" >Save</button>
</form> 

我尝试一次选择并上传多个文件。但是多个文件上传不起作用。如果去掉ajax函数，使用普通表单提交

，代码只能上传一个文件。

我需要做的是使用 ajax 函数上传多个文件。

我使用ajax来提交表单，脚本是:

$("#commentForm").submit(function(e)
{
 $("#divLoading").addClass('show');
 var postData = $(this).serializeArray();
 var formURL = $(this).attr("action");

 $.ajax(
 {
  url : formURL,
  type: "POST",
  data : postData,
  dataType : "html"
 });
 e.preventDefault();
});

在我的 Controller 类中我有:

@RequestMapping(value = "/upload-file", method = RequestMethod.POST)
public String saveFiles(@RequestParam("fileUpload[]") MultipartFile fileUpload[], ModelMap model) 
 { 
 //my custom logic
 }

我的 root-context.xml 文件中有以下 bean

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

还有我的 pom.xml 中的这种依赖

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.1</version>
</dependency>

当我尝试提交表单时出现以下错误:

SEVERE: Servlet.service() for servlet [appServlet] in context with path [/smartwcm-services] threw exception [Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: The current request is not a multipart request] with root cause
org.springframework.web.multipart.MultipartException: The current request is not a multipart request
    at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.assertIsMultipartRequest(RequestParamMethodArgumentResolver.java:216)
    at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.resolveName(RequestParamMethodArgumentResolver.java:167)
    at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:88)
    at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:77)
    at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:162)
    at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:129)
    at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:110)
    at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandleMethod(RequestMappingHandlerAdapter.java:777)
    at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:706)
    at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:85)
    at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:943)
    at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:877)
    at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:966)
    at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:868)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:648)
    at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:842)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:729)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:292)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
    at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:118)
    at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:84)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:342)
    at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:113)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:342)
    at org.springframework.security.web.session.SessionManagementFilter.doFilter(SessionManagementFilter.java:103)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:342)
    at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:113)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:342)
    at org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter.doFilter(SecurityContextHolderAwareRequestFilter.java:154)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:342)
    at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(Reques

Answer 1

您可以按如下方式上传多个文件，

HTML:

<form id="commentForm" name="commentForm" role="form" method="post" enctype="multipart/form-data" action="${rc.getContextPath()}/module/support/save-item-comment">
//other form elements
<input id="file" type="file"  name="fileUpload" multiple/>
 <button type="submit" class="btn btn-primary" >Save</button>
</form> 

jQuery :

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

$("#commentForm").submit(function(e)
{
     e.preventDefault();
     $("#divLoading").addClass('show');

     $.ajax(
     {
        url : $(this).attr("action"),
        type: "POST",
        data: data,
        enctype: 'multipart/form-data',
        processData: false, 
        contentType:false,
     });
});