使用FormData进行Ajax请求上传文件到controller层的实现

Posted jpfss

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用FormData进行Ajax请求上传文件到controller层的实现相关的知识，希望对你有一定的参考价值。

需求背景：

页面上传一个文件到controller层，然后后台对文件进行处理。文件类型不限。

第一种：单纯的上传文件

页面功能展现：

技术分享图片

第一步：首先需要两个jar

commons-fileupload-1.3.2.jar
commons-io-2.4.jar

版本不限：

pom文件中相应两个jar：

[html] view plain copy
 print?
  1. <dependency>  
  2.     <groupId>commons-io</groupId>  
  3.     <artifactId>commons-io</artifactId>  
  4.     <version>2.4</version>  
  5. </dependency>  
  6.   
  7. <dependency>  
  8.     <groupId>commons-fileupload</groupId>  
  9.     <artifactId>commons-fileupload</artifactId>  
  10.     <version>1.3</version>  
  11. </dependency>  

第二步：在spring-mvc.xml中配置

[html] view plain copy
 print?
  1.   <!-- 文件上传配置 -->  
  2.   <bean id="multipartResolver"   
  3.   class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
  4.   <!-- 上传的最大限制 -->  
  5. <property name="maxUploadSize" value="209715200" />  
  6. <!-- 默认编码 -->  
  7. <property name="defaultEncoding" value="UTF-8" />  
  8. <!-- 上传文件的解析 -->  
  9. <property name="resolveLazily" value="true" />  
  10.   </bean>  

第三步：jsp页面代码

[html] view plain copy
 print?
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  2. <%@ page isELIgnored="false" %>  
  3. <!DOCTYPE HTML>  
  4. <html>  
  5. <head>  
  6.     <meta charset="UTF-8" />  
  7.     <title>数据生成</title>  
  8. </head>  
  9. <body>  
  10.     <div>  
  11.         <form method="post" id="file" action="" enctype="multipart/form-data">  
  12.             <h3>选择一个文件:</h3>  
  13.             <input id="excelFile" type="file" name="uploadFile" />  
  14.             <br/><br/>  
  15.             <input type="button" value="上传" onclick="uploadFiles();"/>  
  16.         </form>  
  17.     </div>  
  18. </body>  
  19. <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
  20. <script>  
  21. function uploadFiles(){    
  22. //  var uploadFile = $(‘#excelFile‘).get(0).files[0];  
  23.     var uploadFile = new FormData($("#file")[0]);  
  24.     console.log(uploadFile);  
  25.     if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){  
  26.         $.ajax({  
  27.             url:‘/manage/fileupload/upload‘,  
  28.             type:‘POST‘,  
  29.             data:uploadFile,  
  30.             async: false,    
  31.             cache: false,   
  32.             contentType: false, //不设置内容类型  
  33.             processData: false, //不处理数据  
  34.             success:function(data){  
  35.                 console.log(data);  
  36.                 alert(data.msg);  
  37.             },  
  38.             error:function(){  
  39.                 alert("上传失败！");  
  40.             }  
  41.         })  
  42.     }else {  
  43.         alert("选择的文件无效！请重新选择");  
  44.     }  
  45. }     
  46. </script>  
  47. </html>  
有关于FormData可参考此链接：

[html] view plain copy
 print?
  1. https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects  

第四步：controller层代码

[java] view plain copy
 print?
  1. package com.bigaoread.platform.web.manage.fileupload;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5.   
  6. import javax.servlet.http.HttpServletRequest;  
  7.   
  8. import org.slf4j.Logger;  
  9. import org.slf4j.LoggerFactory;  
  10. import org.springframework.beans.factory.annotation.Autowired;  
  11. import org.springframework.stereotype.Controller;  
  12. import org.springframework.web.bind.annotation.RequestMapping;  
  13. import org.springframework.web.bind.annotation.RequestMethod;  
  14. import org.springframework.web.bind.annotation.RequestParam;  
  15. import org.springframework.web.bind.annotation.ResponseBody;  
  16. import org.springframework.web.multipart.MultipartFile;  
  17.   
  18. import com.bigaoread.platform.service.fileupload.FileUploadService;  
  19.   
  20. @Controller  
  21. @RequestMapping("/manage/fileupload")  
  22. public class FileUploadController {  
  23.     private static final Logger log = LoggerFactory.getLogger(FileUploadController.class);  
  24.       
  25.     @Autowired  
  26.     private FileUploadService fileUploadService;  
  27.       
  28.     @RequestMapping("/uploadPage")  
  29.     public String uploadPage() {  
  30.         return "/manage/fileupload/uploadPage";  
  31.     }  
  32.       
  33.     @RequestMapping(value="/upload", method=RequestMethod.POST)  
  34.     @ResponseBody  
  35.     public Map<String, Object> uploadFile(HttpServletRequest request,  
  36.             @RequestParam MultipartFile uploadFile){  
  37.         Map<String,  Object> resultMap = new HashMap<>();  
  38.         resultMap = fileUploadService.uploadFile(uploadFile);  
  39.         return resultMap;  
  40.     }  
  41.   
  42. }  

第五步：debug测试

上传文件 表结构原始.docx ：

技术分享图片

点击上传后，后台debug查看对象：

技术分享图片

上传成功！



第二种，假如在前端还要传入其他参数时的做法

情景图（增加了一个下拉选）：

技术分享图片

这种多一个参数时，则需要修改两个地方就好了。

第一个是JSP：

如：

[html] view plain copy
 print?
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  2. <%@ page isELIgnored="false" %>  
  3. <%-- <%@ page language="java" contentType="text/html; charset=UTF-8" --%>  
  4. <%--     pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%> --%>  
  5. <!DOCTYPE HTML>  
  6. <html>  
  7. <head>  
  8.     <meta charset="UTF-8" />  
  9.     <title>数据生成</title>  
  10. </head>  
  11. <body>  
  12.     <div>  
  13.         <form method="post" id="file" action="" enctype="multipart/form-data">  
  14.             <select id="select">  
  15.                 <option value="1">1</option>  
  16.                 <option value="2">2</option>  
  17.                 <option value="3">3</option>  
  18.                 <option value="4">4</option>  
  19.                 <option value="5">5</option>  
  20.             </select>  
  21.             <h3>选择一个文件:</h3>  
  22.             <input id="excelFile" type="file" name="uploadFile" />  
  23.             <br/><br/>  
  24.             <input type="button" value="上传" onclick="uploadFiles();"/>  
  25.         </form>  
  26.     </div>  
  27. </body>  
  28. <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
  29. <script>  
  30. function uploadFiles(){    
  31.     var formData = new FormData();  
  32.     var uploadFile = $(‘#excelFile‘).get(0).files[0];  
  33.     //  var uploadFile = new FormData($("#file")[0]);  
  34.     var selectedId = $(‘#select‘).val();  
  35.     formData.append("uploadFile",uploadFile);  
  36.     formData.append("selectedId", selectedId);  
  37.     console.log(uploadFile);  
  38.     if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){  
  39.         $.ajax({  
  40.             url:‘/manage/fileupload/upload‘,  
  41.             type:‘POST‘,  
  42.             data:formData,  
  43.             async: false,    
  44.             cache: false,   
  45.             contentType: false, //不设置内容类型  
  46.             processData: false, //不处理数据  
  47.             success:function(data){  
  48.                 console.log(data);  
  49.                 alert(data.msg);  
  50.             },  
  51.             error:function(){  
  52.                 alert("上传失败！");  
  53.             }  
  54.         })  
  55.     }else {  
  56.         alert("选择的文件无效！请重新选择");  
  57.     }  
  58. }     
  59. </script>  
  60. </html>  

controller代码：

[java] view plain copy
 print?
  1. package com.bigaoread.platform.web.manage.fileupload;  
  2.   
  3. import java.io.IOException;  
  4. import java.util.HashMap;  
  5. import java.util.Map;  
  6. import javax.servlet.http.HttpServletRequest;  
  7. import org.slf4j.Logger;  
  8. import org.slf4j.LoggerFactory;  
  9. import org.springframework.beans.factory.annotation.Autowired;  
  10. import org.springframework.stereotype.Controller;  
  11. import org.springframework.web.bind.annotation.RequestMapping;  
  12. import org.springframework.web.bind.annotation.RequestMethod;  
  13. import org.springframework.web.bind.annotation.RequestParam;  
  14. import org.springframework.web.bind.annotation.ResponseBody;  
  15. import org.springframework.web.multipart.MultipartFile;  
  16.   
  17. import com.bigaoread.platform.service.fileupload.FileUploadService;  
  18.   
  19. @Controller  
  20. @RequestMapping("/manage/fileupload")  
  21. public class FileUploadController {  
  22.     private static final Logger log = LoggerFactory.getLogger(FileUploadController.class);  
  23.       
  24.     @Autowired  
  25.     private FileUploadService fileUploadService;  
  26.       
  27.     @RequestMapping("/uploadPage")  
  28.     public String uploadPage() {  
  29.         return "/manage/fileupload/uploadPage";  
  30.     }  
  31.       
  32.     @RequestMapping(value="/upload", method=RequestMethod.POST)  
  33.     @ResponseBody  
  34.     public Map<String, Object> uploadFile(HttpServletRequest request,  
  35.             @RequestParam MultipartFile uploadFile) throws IOException{  
  36.         String selectedId = request.getParameter("selectedId");  
  37.         Map<String,  Object> resultMap = new HashMap<>();  
  38.         resultMap = fileUploadService.uploadFile(uploadFile);  
  39.         return resultMap;  
  40.     }  
  41.   
  42. }  

测试效果：

技术分享图片

结果：

技术分享图片

技术分享图片






















以上是关于使用FormData进行Ajax请求上传文件到controller层的实现的主要内容，如果未能解决你的问题，请参考以下文章

通过Ajax方式上传文件，使用FormData进行Ajax请求

通过Ajax方式上传文件，使用FormData进行Ajax请求

通过Ajax方式上传文件，使用FormData进行Ajax请求

H5 通过Ajax方式上传文件，使用FormData进行Ajax请求

上传文件，使用FormData进行Ajax请求，jsoncallback

通过Ajax方式上传文件(图片)，使用FormData进行Ajax请求