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

2024-10-16 11:07:45 作者：VaporGas

本文介绍如何在SpringMVC框架中实现文件上传和异步登录功能,通过添加必要的依赖和配置,创建文件上传页面和控制器,实现文件上传到指定文件夹,同时,展示了如何使用AJAX实现局部刷新的异步登录,优化用户体验,详细步骤包括配置springmvc.xml、编写前端页面和控制器等

前言

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

第一步：添加依赖

pom.xml

    <!-- 文件上传与下载-->
    <dependency>
      <groupId>commons-fileupload</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>
</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);

//创建文件夹
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

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

点击提交

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

文件上传成功!

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

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

前言

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

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

案例实现

需求

如图所示需求：

步骤

在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>
    <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

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

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

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