码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2018-04-26 21:07:26      阅读：2264      评论：0      收藏：0      [点我收藏+]

标签：head   ext   encoding   content   logger   orm   typeof   process   ase   

需求背景：

页面上传一个文件到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层的实现

标签：head   ext   encoding   content   logger   orm   typeof   process   ase   

原文地址：https://www.cnblogs.com/jpfss/p/8954567.html
踩
(1)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！