SpringBoot实现Web开发文件的上传与下载

最新推荐文章于 2024-07-16 12:38:00 发布

m0_71180278

最新推荐文章于 2024-07-16 12:38:00 发布

阅读量196

点赞数

文章标签： spring boot 前端后端

本文链接：https://blog.csdn.net/m0_71180278/article/details/134402090

版权

本文详细介绍了如何使用SpringBoot实现文件上传和下载功能。首先，讲解了如何创建上传表单页面，配置全局文件上传设置，以及在控制器中处理文件上传。接着，讲述了如何添加文件下载依赖，定制下载页面，编写下载处理方法，特别是针对中文文件名下载问题的改进。最后，通过效果测试验证了功能的正确性。

摘要由CSDN通过智能技术生成

文件上传

1.编写文件上传的表单页面

创建上传文件的upload.html页面

代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>动态添加文件上传列表</title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/login/js/jquery.min.js}"></script>
</head>
<body>
<div th:if="${uploadStatus}" style="color: red" th:text="${uploadStatus}">上传成功</div>
<form th:action="@{/uploadFile}" method="post" enctype="multipart/form-data">
    上传文件:&nbsp;&nbsp;<input type="button" value="添加文件" onclick="add()"/>
    <div id="file" style="margin-top: 10px;" th:value="文件上传区域">  </div>
    <input id="submit" type="submit" value="上传"
           style="display: none;margin-top: 10px;"/>
</form>
<script type="text/javascript">
    // 动态添加上传按钮
    function add(){
        var innerdiv = "<div>";
        innerdiv += "<input type='file' name='fileUpload' required='required'>" +
            "<input type='button' value='删除' onclick='remove(this)'>";
        innerdiv +="</div>";
        $("#file").append(innerdiv);
        // 打开上传按钮
        $("#submit").css("display","block");
    }
    // 删除当前行<div>
    function remove(obj) {
        $(obj).parent().remove();
        if($("#file