#SpringBoot+JQuery-ajax实现文件上传#title# <#keyword>SpringBoot, JQuery-ajax, 文件上传, 文件下载, web开发, restful api</#keyword> <#description>本文介绍如何使用SpringBoot和JQuery-ajax来实现文件上传功能，包括前端页面、SpringBoot服务端代码和JQuery-ajax代码。步骤详细，示例代码齐全，可直接上手操作。</#description> ## 前端页面前端页面是一个简单的HTML页面，包含一个文件输入框和一个提交按钮。 ```html <!DOCTYPE html> <html> <head> 文件上传

2023-11-02 23:09:32

SpringBoot 和 jQuery-ajax：无缝文件上传之旅

简介

文件上传是一个在网络应用程序中普遍存在的需求。对于开发人员而言，实现文件上传功能至关重要。本文将深入探讨如何使用 SpringBoot 和 jQuery-ajax 来轻松实现文件上传。

前端页面：构建文件输入界面

前端页面是一个 HTML 文件，它包含一个文件输入框和一个提交按钮。用户可以通过文件输入框选择要上传的文件，然后点击提交按钮。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="fileUploadForm" action="/file/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" value="上传" />
    </form>
</body>
</html>

SpringBoot 服务端代码：处理上传请求

SpringBoot 服务端代码使用 SpringMVC 框架来处理文件上传请求。它包含一个控制器，其中有一个处理上传请求的方法。

@RestController
@RequestMapping("/file")
public class FileController {

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            // 保存文件
            String fileName = file.getOriginalFilename();
            File dest = new File("/path/to/save/", fileName);
            file.transferTo(dest);
            // 返回结果
            return "上传成功";
        } catch (Exception e) {
            return "上传失败";
        }
    }

}

jQuery-ajax 代码：发送上传请求

jQuery-ajax 代码负责向 SpringBoot 服务端发送文件上传请求。它使用 FormData 对象来传递文件数据。

$("#fileUploadForm").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        url: "/file/upload",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        success: function(data) {
            alert(data);
        },
        error: function() {
            alert("上传失败");
        }
    });
});