文件上传

1.搭建好的springboot框架(之前博客有),然后还要配置下application.properties,添加如下:

复制代码
# multipart
# 开启上传 spring.servlet.multipart.enabled
=true
# 磁盘书写值控制 spring.servlet.multipart.file-size-threshold=2KB
# 最大文件大小 spring.servlet.multipart.max
-file-size=200MB
# 最大请求大小 spring.servlet.multipart.max
-request-size=215MB
复制代码

2.然后controller中写如下代码:

PS:其实应该建表将文件的一些信息存储下,这里就省略了,感兴趣的可以尝试下。

复制代码
package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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.multipart.MultipartFile;

import java.io.File;

@Controller
@RequestMapping("file")
public class FileController {

    /**
     * 初始化页面
     * @return
     */
    @RequestMapping(value = "/initIndexPage",method = RequestMethod.GET)
    public String initIndexPage(){
        return "fileupload";
    }

    /**
     * 文件上传(单/多)
     * @param files
     * @param model
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/fileUpload",method = RequestMethod.POST)
    public String fileUpload(@RequestParam("file")MultipartFile[] files, Model model) throws Exception{
        if (files.length>0){
            String path = "D:/File";
            String fileName;
            File filePath;
            for (MultipartFile file:files){
                fileName = file.getOriginalFilename();
                filePath = new File(path,fileName);
                if (!filePath.getParentFile().exists()){
                    filePath.getParentFile().mkdirs();
                }
                file.transferTo(new File(path+File.separator+fileName));
                model.addAttribute("msg","上传成功!");
            }
        }else {
            model.addAttribute("msg","文件不能为空!");
        }
        return "fileupload";
    }

}
复制代码

3.前端页面信息如下:

PS:注意开启thyme leaf的标签和jQuery的添加(仅限本次项目)

复制代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> // 开启thyme leaf标签
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/jquery-3.4.1.js"></script>
    <script>
        function addFile() {
            var node = "<input type='file' name='file'>";
            $("form input[type='submit']").before(node);
        }

    </script>
</head>
<body>
<input type="text" th:value="${msg}">
    <input id="add" type="button" value="添加文件" onclick="addFile()">
    <form action="/file/fileUpload" enctype="multipart/form-data" method="post">
        <input type="file" name="file">
        <input type="submit" value="上传">
    </form>
</body>
</html>
复制代码

4.测试上传功能

posted @   lightbc  阅读(159)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示