分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > IT知识

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

发布时间：2023-09-06 01:51责任编辑：郭大石关键词：Ajax
??????????????????? ???????????
???????????????

需求背景：

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

第一种：单纯的上传文件

页面功能展现：


第一步：首先需要两个jar

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

版本不限：

pom文件中相应两个jar：

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

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

[html] view plain copy
print?
  1. <!--文件上传配置-->
  2. >
  3. <propertyname="maxUploadSize"value="209715200"/>
  4. <propertyname="defaultEncoding"value="UTF-8"/>
  5. <propertyname="resolveLazily"value="true"/>
  6. ???<!-- 文件上传配置 --> ???<bean ????> ???<!-- 上传的最大限制 --> ???????<property name="maxUploadSize" value="209715200" /> ???????<!-- 默认编码 --> ???????<property name="defaultEncoding" value="UTF-8" /> ???????<!-- 上传文件的解析 --> ???????<property name="resolveLazily" value="true" /> ???</bean>

    第三步：jsp页面代码

    [html] view plain copy
    print?
    1. <%@pagecontentType="text/html;charset=UTF-8"language="java"%>
    3. <!DOCTYPEHTML>
    4. <head>
    6. <title>数据生成</title>
    7. <body>
    8. <formmethod="post"action=""enctype="multipart/form-data">
    9. <inputtype="file"name="uploadFile"/>
    10. <inputtype="button"value="上传"/>
    11. </div>
    12. <scripttype="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    13. functionuploadFiles(){
    14. varuploadFile=newFormData($("#file")[0]);
    15. if("undefined"!=typeof(uploadFile)&&uploadFile!=null&&uploadFile!=""){
    16. url:‘/manage/fileupload/upload‘,
    17. data:uploadFile,
    18. cache:false,
    19. processData:false,//不处理数据
    20. console.log(data);
    21. },
    22. alert("上传失败！");
    23. })
    24. alert("选择的文件无效！请重新选择");
    25. }
    26. </html>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ page isELIgnored="false" %><!DOCTYPE HTML><html><head> ???<meta charset="UTF-8" /> ???<title>数据生成</title></head><body> ???<div> ???????<form method="post"  action="" enctype="multipart/form-data"> ???????<h3>选择一个文件:</h3> ???????<input  type="file" name="uploadFile" /> ???????<br/><br/> ???????<input type="button" value="上传" /> ???????</form> ???</div></body><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>functionuploadFiles(){// ?var uploadFile = $(‘#excelFile‘).get(0).files[0]; ???varuploadFile=newFormData($("#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("选择的文件无效！请重新选择"); ???}}</script></html>
    有关于FormData可参考此链接：
    [html] view plain copy
    print?
    1. https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
    https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

    第四步：controller层代码

    [java] view plain copy
    print?
    1. packagecom.bigaoread.platform.web.manage.fileupload;
    2. importjava.util.HashMap;
    5. importorg.slf4j.LoggerFactory;
    6. importorg.springframework.stereotype.Controller;
    7. importorg.springframework.web.bind.annotation.RequestMethod;
    8. importorg.springframework.web.bind.annotation.ResponseBody;
    11. @RequestMapping("/manage/fileupload")
    12. privatestaticfinalLoggerlog=LoggerFactory.getLogger(FileUploadController.class);
    13. @Autowired
    16. publicStringuploadPage(){
    18. }
    19. @RequestMapping(value="/upload",method=RequestMethod.POST)
    20. publicMap<String,Object>uploadFile(HttpServletRequestrequest,
    21. Map<String,Object>resultMap=newHashMap<>();
    22. returnresultMap;
    24. 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<String, Object> uploadFile(HttpServletRequest request, ???????????@RequestParam MultipartFile uploadFile){ ???????Map<String, ?Object> resultMap = new HashMap<>(); ???????resultMap = fileUploadService.uploadFile(uploadFile); ???????return resultMap; ???}}

      第五步：debug测试

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


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


      上传成功！



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

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


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

      第一个是JSP：

      如：

      [html] view plain copy
      print?
      1. <%@pagecontentType="text/html;charset=UTF-8"language="java"%>
      3. <%--<%@pagelanguage="java"contentType="text/html;charset=UTF-8"--%>
      5. <!DOCTYPEHTML>
      6. <head>
      8. <title>数据生成</title>
      9. <body>
      10. <formmethod="post"action=""enctype="multipart/form-data">
      11. <optionvalue="1">1</option>
      13. <optionvalue="3">3</option>
      15. <optionvalue="5">5</option>
      16. <h3>选择一个文件:</h3>
      18. <br/><br/>
      20. </form>
      21. </body>
      23. <script>
      24. varformData=newFormData();
      25. //varuploadFile=newFormData($("#file")[0]);
      26. formData.append("uploadFile",uploadFile);
      28. console.log(uploadFile);
      30. $.ajax({
      31. type:‘POST‘,
      32. async:false,
      33. contentType:false,//不设置内容类型
      34. success:function(data){
      35. alert(data.msg);
      36. error:function(){
      38. }
      39. }else{
      41. }
      42. </script>
      43. <%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ page isELIgnored="false" %><%-- <%@ page language="java" contentType="text/html; charset=UTF-8" --%><%-- ????pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%> --%><!DOCTYPE HTML><html><head> ???<meta charset="UTF-8" /> ???<title>数据生成</title></head><body> ???<div> ???????<form method="post" action="" enctype="multipart/form-data"> ???????????<select > ???????????????<option value="1">1</option> ???????????????<option value="2">2</option> ???????????????<option value="3">3</option> ???????????????<option value="4">4</option> ???????????????<option value="5">5</option> ???????????</select> ???????<h3>选择一个文件:</h3> ???????<input type="file" name="uploadFile" /> ???????<br/><br/> ???????<input type="button" value="上传" /> ???????</form> ???</div></body><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>functionuploadFiles(){ ???var formData = new FormData(); ???var uploadFile = $(‘#excelFile‘).get(0).files[0]; ???// ?varuploadFile=newFormData($("#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("选择的文件无效！请重新选择"); ???}}</script></html>

        controller代码：

        [java] view plain copy
        print?
        1. packagecom.bigaoread.platform.web.manage.fileupload;
        2. importjava.io.IOException;
        3. importjava.util.Map;
        4. importorg.slf4j.Logger;
        5. importorg.springframework.beans.factory.annotation.Autowired;
        6. importorg.springframework.web.bind.annotation.RequestMapping;
        7. importorg.springframework.web.bind.annotation.RequestParam;
        8. importorg.springframework.web.multipart.MultipartFile;
        9. importcom.bigaoread.platform.service.fileupload.FileUploadService;
        10. @Controller
        12. publicclassFileUploadController{
        14. privateFileUploadServicefileUploadService;
        15. @RequestMapping("/uploadPage")
        16. return"/manage/fileupload/uploadPage";
        19. @ResponseBody
        20. @RequestParamMultipartFileuploadFile)throwsIOException{
        22. Map<String,Object>resultMap=newHashMap<>();
        23. returnresultMap;
        25. 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<String, Object> uploadFile(HttpServletRequest request, ???????????@RequestParam MultipartFile uploadFile) throws IOException{ ???????String selectedId = request.getParameter("selectedId"); ???????Map<String, ?Object> resultMap = new HashMap<>(); ???????resultMap = fileUploadService.uploadFile(uploadFile); ???????return resultMap; ???}}

          测试效果：


          结果：







          ???????????
        ???????????????

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

      原文地址：https://www.cnblogs.com/jpfss/p/8954567.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved