jquery+springboot实现文件上传功能

以下是jquery+springboot实现文件上传功能的完整攻略。

准备工作

引入依赖

首先需要在pom.xml中引入如下依赖：

<!-- springboot web依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!-- springboot文件上传依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-tomcat</artifactId>
    <scope>provided</scope>
</dependency>

<!-- commons-fileupload依赖 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

<!-- commons-io依赖 -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>

配置文件上传临时目录

在application.properties中配置文件上传的临时目录：

spring.servlet.multipart.location=D:/temp/

前端实现

在HTML页面上添加文件上传的表单：

<form enctype="multipart/form-data">
    <input type="file" name="file"/>
    <button type="button" onclick="upload()">上传</button>
</form>

实现上传文件的jQuery代码：

function upload() {
    var formData = new FormData();
    formData.append('file', $('input[name="file"]')[0].files[0]);
    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            alert(data);
        },
        error: function () {
            alert('上传失败');
        }
    });
}

后端实现

通过@RestController注解将上传接口暴露出来，实现文件上传的文件处理逻辑：

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

@RestController
public class UploadController {
    @Value("${spring.servlet.multipart.location}")
    private String uploadDir;

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) throws IOException {
        if (file.isEmpty()) {
            return "文件为空";
        }
        String filename = file.getOriginalFilename();
        String ext = FilenameUtils.getExtension(filename);
        if (StringUtils.isNotEmpty(ext) && !ext.equalsIgnoreCase("txt")) {
            return "只允许上传txt文件";
        }
        File destFile = new File(uploadDir, filename);
        FileUtils.writeByteArrayToFile(destFile, file.getBytes());
        return "上传成功";
    }
}

示例说明

示例1：上传txt文件

如上所示，在前端的表单中选择一份txt文件点击上传，上传成功后会弹出提示框：

上传成功

如果选择的文件不是txt文件，则会提示：

只允许上传txt文件

示例2：上传空文件

如果选择了空文件进行上传，则会提示：

文件为空