Spring Boot の Webアプリで、jQuery を使ってファイルをアップロードする方法を書いていきます。
目次
- バージョン
- コントローラーの作成
- 画面の作成
- アップロードサイズの制限
- 起動クラスの作成
- ビルドファイルの作成
- 動作確認
1. バージョン
動作確認で使用した製品のバージョンは以下の通りです。
2. コントローラーの作成
ファイルアップロードを受け付けて、ファイルを保存するクラスを作成します。
src/main/java/org/example/controller/UploadController.java
package org.example.controller; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; 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 UploadController { @PostMapping("/upload") public void upload(@RequestParam MultipartFile file) throws IOException { Path dst = Path.of("ディレクトリのパス", file.getOriginalFilename()); Files.copy(file.getInputStream(), dst); } }
アップロードされたファイルの名前を取得して、指定したディレクトリに保存します。
3. 画面の作成
ファイルアップロード用の HTML を作成します。
src/main/resources/static/index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ファイルアップロード</title> </head> <body> <form> <p><input type="file" name="file"></p> <p><input type="button" id="upload" value="アップロード"></p> </form> <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> <script> $(function() { $('#upload').click(function() { var formData = new FormData( $('form').get(0) ); $.ajax({ url:'/upload', method:'post', data:formData, processData:false, contentType:false, cache: false }).done(function(data, status, jqxhr) { alert('アップロード成功'); }).fail(function(data, status, jqxhr) { alert('アップロードエラー'); }); }); }); </script> </body> </html>
サンプルなので、HTML に JavaScript も記述しています。
4. アップロードサイズの制限
設定ファイルでアップロードサイズを制限することができます。
src/main/resources/application.properties
# ファイルサイズの合計の最大値 spring.servlet.multipart.max-file-size=1MB # リクエストサイズの最大値 spring.servlet.multipart.max-request-size=10MB
上の値がデフォルトになります。
5. 起動クラスの作成
アプリを起動するクラスを作成します。
src/main/java/org/example/SpringApp.java
package org.example; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class SpringApp { public static void main(String[] args) { SpringApplication.run(SpringApp.class, args); } }
6. ビルドファイルの作成
Maven のビルドファイルを作成します。
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.0.1</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>org.example</groupId> <artifactId>spring-jquery-fileupload</artifactId> <version>1.0.0</version> <properties> <java.version>17</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
7. 動作確認
アプリを起動して以下の URL にアクセスします。
http://localhost:8080/index.html
ボタン「ファイルを選択」を押してファイルを選択します。それから「アップロード」を押すと、処理の結果が表示されます。