devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传_springboot ajax 文件上传

作者：凡人多烦事01 | 2024-05-31 11:45:41

赞

踩

springboot ajax 文件上传

前言

本文是一篇由前端发起JQuery+Ajax异步请求，传输表单和文件数据，后端控制器获取数据的文章。复制粘贴，亲测可用！

一、示例代码

（1）pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.     <modelVersion>4.0.0</modelVersion>
  6.  
  7.     <groupId>org.example</groupId>
  8.     <artifactId>springboot-jwt</artifactId>
  9.     <version>1.0-SNAPSHOT</version>
  10.  
  11.     <parent>
  12.         <groupId>org.springframework.boot</groupId>
  13.         <artifactId>spring-boot-starter-parent</artifactId>
  14.         <version>2.2.5.RELEASE</version>
  15.         <relativePath/>
  16.     </parent>
  17.  
  18.     <dependencies>
  19.  
  20.         <!-- SpringMVC -->
  21.         <dependency>
  22.             <groupId>org.springframework.boot</groupId>
  23.             <artifactId>spring-boot-starter-web</artifactId>
  24.         </dependency>
  25.         <!-- / SpringMVC -->
  26.  
  27.         <!-- Spring Boot Mybatis -->
  28.         <!-- <dependency>
  29.             <groupId>org.mybatis.spring.boot</groupId>
  30.             <artifactId>mybatis-spring-boot-starter</artifactId>
  31.             <version>1.2.0</version>
  32.         </dependency> -->
  33.         <!-- / Spring Boot Mybatis -->
  34.  
  35.         <!-- MySQL 连接驱动依赖 -->
  36.         <!--<dependency>
  37.             <groupId>mysql</groupId>
  38.             <artifactId>mysql-connector-java</artifactId>
  39.             <version>5.1.39</version>
  40.         </dependency>-->
  41.         <!-- / MySQL 连接驱动依赖 -->
  42.  
  43.         <!-- MSSQL 连接驱动依赖 -->
  44.         <!-- <dependency>
  45.             <groupId>com.microsoft.sqlserver</groupId>
  46.             <artifactId>mssql-jdbc</artifactId>
  47.             <scope>runtime</scope>
  48.         </dependency> -->
  49.         <!-- / MSSQL 连接驱动依赖 -->
  50.  
  51.         <!-- java-jwt -->
  52.         <!-- <dependency>
  53.             <groupId>com.auth0</groupId>
  54.             <artifactId>java-jwt</artifactId>
  55.             <version>3.8.1</version>
  56.         </dependency> -->
  57.         <!-- / java-jwt -->
  58.  
  59.         <!-- jjwt -->
  60.         <!-- <dependency>
  61.             <groupId>io.jsonwebtoken</groupId>
  62.             <artifactId>jjwt</artifactId>
  63.             <version>0.9.1</version>
  64.         </dependency> -->
  65.         <!-- / jjwt -->
  66.  
  67.         <!-- lombok -->
  68.         <!-- <dependency>
  69.             <groupId>org.projectlombok</groupId>
  70.             <artifactId>lombok</artifactId>
  71.         </dependency> -->
  72.         <!-- / lombok -->
  73.  
  74.         <!-- fastjson -->
  75.         <dependency>
  76.             <groupId>com.alibaba</groupId>
  77.             <artifactId>fastjson</artifactId>
  78.             <version>1.1.41</version>
  79.         </dependency>
  80.  
  81.         <!-- thymeleaf前端模板赋值框架 -->
  82.         <dependency>
  83.             <groupId>org.springframework.boot</groupId>
  84.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  85.         </dependency>
  86.         <!-- / thymeleaf前端模板赋值框架 -->
  87.  
  88.         <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
  89.         <dependency>
  90.             <groupId>commons-fileupload</groupId>
  91.             <artifactId>commons-fileupload</artifactId>
  92.             <version>1.3.1</version>
  93.         </dependency>
  94.  
  95.         <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
  96.         <dependency>
  97.             <groupId>commons-io</groupId>
  98.             <artifactId>commons-io</artifactId>
  99.             <version>2.4</version>
  100.         </dependency>
  101.  
  102.     </dependencies>
  103.  
  104. </project>

（2）App.java

  1. import org.mybatis.spring.annotation.MapperScan;
  2. import org.springframework.boot.SpringApplication;
  3. import org.springframework.boot.autoconfigure.SpringBootApplication;
  4.  
  5. @MapperScan("com.zhiquan.mapper")
  6. @SpringBootApplication
  7. public class App {
  8.     public static void main(String[] args) {
  9.         SpringApplication.run(App.class,args);
  10.     }
  11. }

（3）ResourceConfig.java

  1. package com.zhiquan.config;
  2.  
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
  6.  
  7. @Configuration
  8. public class ResourceConfig extends WebMvcConfigurationSupport {
  9.     /**
  10.      * 配置静态访问资源，在resources目录新建static子目录，所有静态文件如：css、js、font等存于此
  11.      * @param registry
  12.      */
  13.     public void addResourceHandlers(ResourceHandlerRegistry registry) {
  14.         registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
  15.     }
  16. }

（4）application.yml

  1. server:
  2.   port: 8088
  3.  
  4. spring:
  5.   thymeleaf:
  6.     prefix:
  7.       classpath: /templates           # 访问templates下的html文件需要配置模板映射，在resources目录新建templates子目录以及xxx等子目录，然后创建html，如：resources/templates/xxx/yyy.html
  8.     cache: false                      # 开发时关闭缓存,不然没法看到实时页面
  9.   datasource:
  10. #    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&useSSL=false
  11. #    driverClassName: com.mysql.jdbc.Driver
  12. #    username: root
  13. #    password:
  14.     url: jdbc:sqlserver://99.99.99.99:1433;databaseName=AIOWFILE
  15.     username: root
  16.     password: 
  17.   servlet:
  18.     multipart:
  19.       max-file-size: 5MB              #设置单个文件的最大值
  20.       max-request-size: 15MB          #设置单次请求的所有文件的最大值

（5）uploadSingleFile.html（单文件上传）

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="/static/js/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     <p>单文件上传</p>
  10.     <p><input id="cert" type="file" /></p>
  11.     <p><input type="button" value="上传" onclick="submit();" /></p>
  12. </body>
  13. <script>
  14.     function submit(){
  15.         var formData = new FormData();
  16.         formData.append("file", $("#cert")[0].files[0]);
  17.  
  18.         console.log(formData);
  19.  
  20.         $.ajax({
  21.             type: "POST",
  22.             url: '/uploadSingleFile',
  23.             data: formData,
  24.             processData: false,
  25.             contentType: false,
  26.             success: function (data) {
  27.                 alert(data);
  28.             }
  29.         });
  30.     }
  31. </script>
  32. </html>

（6）uploadMultiFile.html（多文件上传 + 表单内容）

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="/static/js/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     <p>多文件上传 + 表单内容</p>
  10.     <p><input id="cert" type="file" /></p>
  11.     <p><input id="attachment1" type="file" /></p>
  12.     <p><input id="attachment2" type="file" /></p>
  13.     <p><input id="token" type="hidden" value="ka8912kas62ghk236a5adh32s0923lsd"/></p>
  14.     <p><input id="title" type="text" placeholder="标题"/></p>
  15.     <p><input id="content" type="text" placeholder="内容"/></p>
  16.     <p><input type="button" value="上传" onclick="submit();" /></p>
  17. </body>
  18. <script>
  19.     function submit(){
  20.         var formData = new FormData();
  21.  
  22.         formData.append("file", $("#cert")[0].files[0]);
  23.         formData.append("file", $("#attachment1")[0].files[0]);
  24.         formData.append("file", $("#attachment2")[0].files[0]);
  25.         formData.append("text", $("#title").val());
  26.         formData.append("text", $("#content").val());
  27.         formData.append("hidden", $("#token").val());
  28.  
  29.         console.log(formData);
  30.  
  31.         $.ajax({
  32.             type: "POST",
  33.             url: '/uploadMultiFile',
  34.             data: formData,
  35.             dataType: 'json',
  36.             processData: false,
  37.             contentType: false,
  38.             success: function (data) {
  39.                 console.log(data.msg);
  40.                 alert(data.msg);
  41.             },
  42.             error: function (e) {
  43.                 console.log(e);
  44.                 alert(e);
  45.             }
  46.         });
  47.     }
  48. </script>
  49. </html>

（7）UserController.java

  1. package com.zhiquan.controller;
  2.  
  3. import com.alibaba.fastjson.JSONObject;
  4. import com.zhiquan.entity.CommonFile;
  5. import com.zhiquan.entity.User;
  6. import com.zhiquan.service.UserService;
  7. import com.zhiquan.utils.JwtUtils;
  8. import com.zhiquan.vo.Msg;
  9. import com.zhiquan.vo.TokenVo;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. import org.springframework.stereotype.Controller;
  12. import org.springframework.web.bind.annotation.*;
  13. import org.springframework.web.multipart.MultipartFile;
  14. import java.io.File;
  15. import java.io.FileOutputStream;
  16. import java.sql.Timestamp;
  17. import java.util.Date;
  18. import java.util.Map;
  19. import java.util.UUID;
  20.  
  21. @Controller
  22. public class UserController {
  23.     @Autowired
  24.     private UserService UserService;
  25.  
  26.     /**
  27.      * 单文件上传页面
  28.      * @return
  29.      */
  30.     @GetMapping(value = "/uploadSingleFile")
  31.     public String uploadSingleFile(){
  32.         return "/home/uploadSingleFile";
  33.     }
  34.  
  35.     /**
  36.      * 多文件上传页面
  37.      */
  38.     @GetMapping(value = "/uploadMultiFile")
  39.     public String uploadMultiFile(){
  40.         return "/home/uploadMultiFile";
  41.     }
  42.  
  43.     
  44.     /**
  45.      * 单文件上传处理
  46.      */
  47.     @PostMapping(value = "/uploadSingleFile")
  48.     @ResponseBody
  49.     public String uploadSingleFile(@RequestParam("file") MultipartFile file) {
  50.         // 文件处理
  51.         String fileName = file.getOriginalFilename();
  52.         String fileExtension = fileName.substring(fileName.lastIndexOf(".") + 1,fileName.length());
  53.         //String filePath = "src/main/resources/static/files/";
  54.         String filePath = "D:\\UploadedFile\\";
  55.         File targetFile = new File(filePath);
  56.         if(!targetFile.exists()) {
  57.             targetFile.mkdirs();
  58.         }
  59.  
  60.         try {
  61.             Timestamp ts1 = new Timestamp((new Date("2020/09/16 17:18:42")).getTime());
  62.             Timestamp ts2 = new Timestamp((new Date()).getTime());
  63.             CommonFile commonFile = new CommonFile();
  64.             commonFile.setSubPath("/20200916-171842-123456");
  65.             commonFile.setFileName(file.getOriginalFilename());
  66.             commonFile.setFileExtension(fileExtension);
  67.             commonFile.setCreationTime(ts1);
  68.             commonFile.setModificationTime(ts2);
  69.             commonFile.setAppendix("NULL");
  70.             commonFile.setFileSize((int) file.getSize());
  71.             commonFile.setFileImage(file.getBytes());
  72.             System.out.println(commonFile);
  73.  
  74.             // 文件存入数据库
  75.             try {
  76.                 UserService.saveCommonFile(commonFile);
  77.                 System.out.println("文件存入MSSQL数据库成功！");
  78.             } catch (Exception e){
  79.                 System.out.println("文件存入失败！");
  80.             }
  81.  
  82.             // 文件存到服务器
  83.             try {
  84.                 FileOutputStream out = null;
  85.                 out = new FileOutputStream(filePath + fileName);
  86.                 out.write(file.getBytes());
  87.                 out.flush();
  88.                 out.close();
  89.                 System.out.println("文件写入成功！");
  90.             } catch (Exception e){
  91.                 System.out.println("文件写入失败！");
  92.             }
  93.  
  94.             return "ok";
  95.         } catch (Exception e) {
  96.             return "no";
  97.         }
  98.     }
  99.  
  100.     /**
  101.      * 多文件上传处理
  102.      */
  103.     @PostMapping(value = "/uploadMultiFile")
  104.     @ResponseBody
  105.     public JSONObject uploadMultiFile(@RequestParam("file") MultipartFile[] files,@RequestParam("text") String text,@RequestParam("hidden") String token) {
  106.         System.out.println(text);
  107.         System.out.println(token);
  108.  
  109.         JSONObject jsonObject = new JSONObject();
  110.  
  111.         try{
  112.             if (files.length > 0){
  113.                 for (MultipartFile file:files) {
  114.                     System.out.println(file.getOriginalFilename());
  115.  
  116.                     // 文件处理
  117.                     String fileName = file.getOriginalFilename();
  118.                     String fileExtension = fileName.substring(fileName.lastIndexOf(".") + 1,fileName.length());
  119.                     String filePath = "D:\\UploadedFile\\";
  120.                     File targetFile = new File(filePath);
  121.                     if(!targetFile.exists()) {
  122.                         targetFile.mkdirs();
  123.                     }
  124.  
  125.                     // 文件存到服务器
  126.                     try {
  127.                         FileOutputStream out = null;
  128.                         out = new FileOutputStream(filePath + fileName);
  129.                         out.write(file.getBytes());
  130.                         out.flush();
  131.                         out.close();
  132.                         System.out.println("文件写入成功！");
  133.                     } catch (Exception e){
  134.                         System.out.println("文件写入失败！");
  135.                     }
  136.                 }
  137.             }
  138.             jsonObject.put("msg","ok");
  139.  
  140.         }catch (Exception e){
  141.             jsonObject.put("msg","no");
  142.         }
  143.         return jsonObject;
  144.     }
  145. }
  146.

二、运行结果 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/652150
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号