SpringMVC+Ajax实现文件批量上传和下载功能实例代码

下面给出详细的攻略以及两条示例说明。

1. 概述

本攻略主要介绍如何使用SpringMVC和Ajax实现文件批量上传和下载功能。SpringMVC提供了强大的文件处理能力，可以方便地上传和下载文件。而Ajax则可以实现异步上传和下载文件，提高用户体验。

2. 文件上传

2.1 配置文件上传相关bean

首先，需要在SpringMVC配置文件中添加以下配置：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 限制文件大小为10MB -->
    <property name="maxUploadSize" value="10485760" />
    <!-- 默认编码为UTF-8 -->
    <property name="defaultEncoding" value="UTF-8" />
</bean>

这里使用了CommonsMultipartResolver作为文件上传解析器，并设置上传文件大小的最大值为10MB。如果不设置，默认最大值为1MB。

2.2 控制器和视图层代码实现

然后，需要在控制器中添加文件上传请求处理方法：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("file") MultipartFile[] files) {
    // 遍历上传的文件列表，进行存储等操作
    for (MultipartFile file : files) {
        // 操作文件
    }
    return "上传成功";
}

其中，@RequestBody注解表示请求体采用JSON格式，@RequestParam("file")注解表示上传的文件保存在名为file的参数中。

在视图层，需要使用Ajax向后台发送上传请求：

$(document).ready(function () {
    $("#uploadBtn").click(function () {
        var formData = new FormData();
        var files = $("#file")[0].files;
        // 遍历所有文件
        for (var i = 0; i < files.length; i++) {
            formData.append("file", files[i]);
        }
        $.ajax({
            url: "/upload",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                alert(result);
            },
            error: function () {
                alert("上传失败");
            }
        });
    });
});

其中，FormData是HTML5新增的一个对象，用于将表单数据封装成键值对，便于上传文件。processData: false和contentType: false表示不处理表单数据，直接提交。

2.3 示例说明

下面是一个简单的文件上传示例：用户可以在页面上选择一个或多个文件进行上传。上传过程中，页面不需要刷新，用户可以在上传完成后看到上传成功的提示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="file" multiple="multiple"/>
    <button id="uploadBtn">上传</button>

    <script>
        // Ajax上传文件
        $(document).ready(function () {
            $("#uploadBtn").click(function () {
                var formData = new FormData();
                var files = $("#file")[0].files;
                for (var i = 0; i < files.length; i++) {
                    formData.append("file", files[i]);
                }
                $.ajax({
                    url: "/upload",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        alert(result);
                    },
                    error: function () {
                        alert("上传失败");
                    }
                });
            });
        });
    </script>
</body>
</html>

需要注意的是，示例中的控制器方法需要自行实现。

3. 文件下载

3.1 控制器和视图层代码实现

为了实现文件下载功能，需要在控制器中添加方法：

@RequestMapping("/download")
@ResponseBody
public ResponseEntity<byte[]> download(HttpServletRequest request) throws IOException {
    String fileName = "test.txt";   // 下载的文件名
    String filePath = request.getSession().getServletContext().getRealPath("/WEB-INF/files/") + fileName;
    File file = new File(filePath);
    HttpHeaders headers = new HttpHeaders();
    // 下载时自动识别文件类型
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    // 指定下载时显示的文件名
    headers.setContentDispositionFormData("attachment", fileName);
    return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file), headers, HttpStatus.OK);
}

其中，使用了org.apache.commons.io.FileUtils类来读取文件字节流，并将文件字节流存储在ResponseEntity中，然后将其返回给用户，实现文件下载。

在视图层，需要使用Ajax向后台发送下载请求：

$(document).ready(function () {
    $("#downloadBtn").click(function () {
        // 获取服务器上的文件URL
        var url = "/download";
        // 创建隐藏的IFrame作为下载容器对象
        var downloadFrame = $("<iframe>").attr("style", "display:none;");
        $("body").append(downloadFrame);
        downloadFrame.attr("src", url);
    });
});

3.2 示例说明

下面是一个简单的文件下载示例：点击下载按钮后会自动下载一个文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件下载示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button id="downloadBtn">下载</button>

    <script>
        // Ajax下载文件
        $(document).ready(function () {
            $("#downloadBtn").click(function () {
                var url = "/download";
                var downloadFrame = $("<iframe>").attr("style", "display:none;");
                $("body").append(downloadFrame);
                downloadFrame.attr("src", url);
            });
        });
    </script>
</body>
</html>