【一文学会文件上传】SpringBoot+JQuery-ajax实现文件上传

在Spring Boot中，你可以使用MultipartFile接口来处理文件上传。以下是使用Spring Boot和jQuery AJAX实现文件上传的简单示例。

首先，你需要在Spring Boot后端创建一个控制器来处理文件上传的请求：




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;
 
@RestController
public class FileUploadController {
 
    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 这里可以添加文件上传的处理逻辑
        // 例如保存文件到服务器、数据库等
        // 返回响应信息
        return "文件上传成功: " + file.getOriginalFilename();
    }
}

然后，你可以使用jQuery AJAX在前端发送文件：




<!DOCTYPE html>
<html>
<head>
<title>文件上传示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<form id="uploadForm">
    <input type="file" name="file" id="file" />
    <button type="button" id="upload">上传</button>
</form>
 
<script>
$(document).ready(function() {
    $('#upload').click(function() {
        var formData = new FormData($('#uploadForm')[0]);
        $.ajax({
            url: '/upload',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                alert(response);
            },
            error: function() {
                alert('文件上传失败');
            }
        });
    });
});
</script>
 
</body>
</html>

在这个HTML页面中，我们有一个表单用于选择文件，一个按钮用于触发文件上传。使用jQuery，我们捕捉到按钮点击事件，然后构建FormData对象，该对象包含了文件信息，并通过AJAX以POST请求发送到后端的/upload路径。

确保你的Spring Boot应用配置了multipart文件上传的支持，在application.properties或application.yml中添加以下配置：




spring.servlet.multipart.max-file-size=128KB
spring.servlet.multipart.max-request-size=128KB

以上代码实现了文件上传的基本功能，你可以根据实际需求对代码进行扩展和优化。

【一文学会文件上传】SpringBoot+JQuery-ajax实现文件上传

评论已关闭

推荐阅读