Spring MVC实现文件上传及优化案例解析

2024-10-19 10:18 开发作者： VaporGas

前言

SpringMVC本身提高了便捷的文件上传方式，接下来我将演示如何在SpringMVC中实现文件上传的相关操作。以下案例是基于SSM框架整合的基础上实现的文件上传功能，如何进行SSM整合，可以参考我以往的博客。

第一步：添加依赖

pom.xml

    <!-- 文件上传与下载-->
    <dependency>
      <groupId>commons-javascriptfileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>

第二步：创建springmvc配置文件，添加文件上传配置

spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:util="http://www.springframework.org/schema/util"
       xsi:schemaLocation="http://www.springframework.org/schema/beans   
            http://www.springframework.org/schema/beans/spring-beans-4.1.xsd      
            http://www.springframework.org/schema/context   
            http://www.springframework.org/schema/context/spring-context-4.1.xsd      
            http://www.springframework.org/schema/mvc   
            http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd      
            http://www.springframework.org/schema/util   
            http://www.springframework.org/schema/util/spring-util-4.1.xsd">
    <context:component-scan base-package="com.csx"/>
    <mvc:annotation-driven/>
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/" p:suffix=".JSP"/>
    <!--文件上传 2.加配置,注意id-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="104857600"/>
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>
</beans>

开启扫描

开启注解

配置视图解析器

配置文件上传相关配置

一定要配置id，不能省略，否则报错（底层根据id加载这个bean）

第三步：创建文件上传页面

up.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<python;/head>
<body>
<!--文件上传 3.写页面-->
<form action="/user/up.do" method="post" enctype="multipart/form-data">
    文件:<input type="file" name="file"> <br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

请求方式只能是post
注意添加enctype属性
文件上传的type为file，注意name属性值要与controller层的参数名一致

第四步：写controller，上传到指定文件夹

UserController

package com.csx.controller;
import com.csx.entity.User;
import com.csx.service.UserService;
import com.csx.util.PageUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
import Javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.UUID;
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    /*文件上传 4.写controller,上传至指定文件夹*/
    @RequestMapping("/up")
    public String fileUpload(MultipartFile file, HttpServletRequest request) throws IOException {
        //创建文件夹,上传文件
        //获得完整路径
        String realPath = request.getSession().getServletContext().getRealPath("/upload");
        System.out.println("realPath===" + realPath);
        //创建文件夹
        File f = new File(realPath);
        //如果文件夹不存在,就创建
        if (!f.exists()) {
            f.mkdirs();
        }
        //拿到上传的文件名
        String fileName = file.getOriginalFilename();
        //将UUID和文件名拼接,防止文件名重名而覆盖
        fileName = UUID.randomUUID() + "_" + fileName;
        //创建空文件
        File newFile = new File(f, fileName);
        //将文件内容写入
        file.transferTo(newFile);
        return "index";
    }
}

代码解析

文件上传，controller使用MultipartFile 类型进行接收，并且参数名与页面的属性值保持一致

String realPath = request.getSession().getServletContext().getRealPath("/upload");
System.out.println("realPath===" + realPath);

Spring MVC实现文件上传及优化案例解析

//创建文件夹
File f = new File(realPath);
//如果文件夹不存在,就创建
if (!f.exists()) {
    f.mkdirs();
}

如果文件夹不存在，则创建文件夹upload

//拿到上传的文件名
String fileName = file.getOriginalFilename();
//将UUID和文件名拼接,防止文件名重名而覆盖
fileName = UUID.randomUUID() + "_" + fileName;

拿到原始文件名，并且使用UUID进行覆盖，防止上传同名文件导致文件覆盖

//创建空文件
File newFile = new File(f, fileName);
//将文件内容写入
file.transferTo(newFile);
return "index";

创建空文件，写入内容，返回json格式数据

演示效果

地址栏输入http://localhost:8080/up.html

Spring MVC实现文件上传及优化案例解析

点击选择文件，选择第5.jpg

Spring MVC实现文件上传及优化案例解析

点击提交

Spring MVC实现文件上传及优化案例解析

返回index，就是我们return的String数据，表示上传成功，查看upload文件夹

Spring MVC实现文件上传及优化案例解析

文件上传成功!

补充：实现局部刷新的异步登录功能：优化用户体验的SpringMVC实践

实现局部刷新的异步登录功能：优化用户体验的SpringMVC实践

前言

什么是异步刷新（局部刷新）

异步刷新是指在不重新加载整个网页的情况下，仅更新javascript页面的某个部分。这通常通过AJAX（Asynchronous javascript and XML）技术实现，AJAX允许网页与服务器进行异步通信，即在发送请求后无需等待服务器响应即可完成其他任务。

案例实现

需求

如图所示需求：

Spring MVC实现文件上传及优化案例解析

步骤

在SpringMVC中，实现异步刷新的步骤如下：

前端页面：使用JavaScript（如jquery）发送AJAX请求到服务器。这个请求可以包含需要更新的数据或指示服务器更新哪部分页面的信息。
SpringMVC控制器：控制器接收AJAX请求，处理请求中的数据，并返回相应的响应。这个响应可以是JSON、XML或其他格式的数据，具体取决于前端页面的需求。
前端页面更新：当AJAX请求成功返回时，JavaScript使用返回的数据更新页面的指定部分。这通常涉及使用DOM操作来修改页面的内容。

准备工作

创建web项目，添加相关依赖，配置springmvc.xml和web.xml配置文件

登录页面

<%--
  Created by IntelliJ IDEA.
  User: 21038
  Date: 2024/10/11
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
<div>
<form id="frm"  >
<table>
    <tr>
        <td>用户名:<input type="text" id="user_name" name="user_name" value=""/></td>
        <td>密码:<input type="password" id="password" name="password" value=""/></td>
        <td><input type="button" id="commit" value="登录" /></td>
    </tr>
  VhZCyZe  <tr>
        <td>
            <span id="s1" ></span>
        </td>
    </tr>
</table>
</form>
<script>
    var user="";
    $(function () {
        $("#commit").click(function () {
            $.ajax({
                type:'POST',
                url:'/login.do',
                data:$("#frm").serialize(),
                success:function (res) {
                    user=res;
                    console.log(user)
                    if (user==""){
                        $("#s1").html("");
                    }else {
                        $("#s1").html("用户:"+user+"，欢迎登录！");
                    }
                    $("#user_name").val("");
                    $("#password").val("");
                }
            });
        });
    });
</script>
</body>
</html>

使用AJAX进行异步提交数据到controller，并获取响应的Json格式数据，接收到数据后，将数据填充到页面指定位置。

控制器

LoginController

@RestController
public class LoginController {
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public String LoginController(String user_name , String password ){
        if ("admin".equals(user_name) && "123编程".equals(password)){
            return user_name;
        }
        return "";
    }
}

测试

输入账户：admin和密码：123

Spring MVC实现文件上传及优化案例解析

点击登录按钮，发送ajax请求

Spring MVC实现文件上传及优化案例解析

页面异步刷新，获取到后台传输过来的数据，并填写到页面中。

到此这篇关于Spring MVC实现高效文件上传及优化案例的文章就介绍到这了,更多相关Spring MVC文件上传内容请搜索编程客栈(www.devze.com)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程客栈(www.devze.com)！

继续阅读：Spring MVC局部刷新异步登录 Spring MVC文件上传

Spring MVC实现文件上传及优化案例解析

目录

前言

第一步：添加依赖

pom.xml

第二步：创建springmvc配置文件，添加文件上传配置

spring-mvc.xml

第三步：创建文件上传页面

up.html

第四步：写controller，上传到指定文件夹

UserController

代码解析

演示效果

实现局部刷新的异步登录功能：优化用户体验的SpringMVC实践

前言

什么是异步刷新（局部刷新）

案例实现

需求

步骤

准备工作

更多精彩内容

精彩评论

最新开发

SpringBoot整合Liquibase实现对数据库管理和迁移

java8升级java21方法步骤(完整pom文件升级及代码修改)

javacv ffmpeg使用原生ffmpeg命令方式

golang进行xml文件解析的操作方法

如何使用go实现创建WebSocket服务器

开发排行榜

springboot后端存储富文本内容的思路与步骤(含图片内容)

PyCharm运行python测试,报错“没有发现测试”/“空套件”的解决

return base64.b64encode(b).decode(

基于C语言实现钻石棋游戏的示例代码

Sublime Text 3解决中文乱码问题（实测可用）