ファイルのアップロードとダウンロードはWeb開発において非常に基本的な機能ですが、実際の開発ではファイルのアップロードやダウンロードの進捗状況をリアルタイムに表示する必要があることがよくあります。この記事では、Springbootを使用してファイルのアップロードとダウンロードを実装し、それにリアルタイムプログレスバーの機能を追加する方法を紹介します。
ファイルのアップロード
Maven 依存関係を追加する
まず、次の Maven 依存関係を追加する必要があります。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
その中で、spring-boot-starter-web は Web アプリケーションを構築するために Spring Boot によって提供される依存関係の 1 つであり、commons-fileupload は人気のある Java ファイル アップロード ライブラリです。
HTMLフォームを作成する
次に、ファイルを送信するための HTML フォームを作成する必要があります。このフォームでは、要素を使用してアップロードするファイルを選択し、要素を使用してフォームを送信できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"/>
<br/>
<input type="submit" value="Upload"/>
</form>
</body>
</html>
このフォームでは、フォームの action 属性を「/upload」に設定します。これは、アップロード リクエストを処理する URL です。
ファイルアップロードを実装する
Springboot では、 org.springframework.web.multipart.MultipartFile クラスを使用して、アップロードされたファイルを処理できます。アップロードされたファイルを受信して処理するコントローラーを作成できます。
@RestController
public class UploadController {
@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) throws IOException {
// do something with the file
return "success";
}
}
上記のコードでは、 @RequestParam アノテーションを使用してファイル アップロードのパラメータ名を指定し、ファイルをディスクに保存するか、その他の操作を実行します。最後に、応答コンテンツとして単純な文字列を返します。
プログレスバーを追加する
アップロードプログレスバー機能を実現するには、JavaScriptとAjaxを使用して実現する必要があります。具体的には、XMLHttpRequest オブジェクトを使用して非同期リクエストを送信し、アップロード プロセス中に進行状況バーをリアルタイムで更新できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("form").submit(function (event) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
return xhr;
},
type: "POST",
url: "/upload",
data: formData,
processData: false,
contentType: false,
success: function (data) {
alert("Upload complete!");
}
});
});
});
</script>
</head>
<body>
<form>
<input type="file" name="file"/>
<br/>
<button type="submit">Upload</button>
</form>
<div style="background-color: #ddd; height: 20px; width: 0%;" id="progress"></div>
</body>
</html>
上記のコードでは、jQuery を使用して XHR リクエストを送信し、アップロード中に進行状況バーを更新しました。具体的には、ファイルのアップロード中にリアルタイムで進行状況バーを更新するために、xhr.upload と xhr オブジェクトに進行状況イベント ハンドラーを追加しました。
ドキュメントをダウンロード
ファイルダウンロードを実装する
ファイルのダウンロードを実装するには、ダウンロード リクエストを処理するコントローラーを作成し、org.springframework.core.io.Resource クラスを使用してファイルを応答コンテンツとしてクライアントに返す必要があります。
@RestController
public class DownloadController {
@GetMapping("/download")
public ResponseEntity<Resource> download() throws IOException {
Resource file = new FileSystemResource("/path/to/file");
HttpHeaders headers = new HttpHeaders();
headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + file.getFilename());
return ResponseEntity.ok()
.headers(headers)
.contentLength(file.contentLength())
.contentType(MediaType.parseMediaType("application/octet-stream"))
.body(new InputStreamResource(file.getInputStream()));
}
}
上記のコードでは、@GetMapping アノテーションを使用してダウンロード リクエストを処理する URL を指定し、org.springframework.core.io.Resource クラスを使用してファイルのコンテンツを読み取ります。最後に、ファイルを応答コンテンツとしてクライアントに返します。
プログレスバーを追加する
ダウンロードの進行状況バーを追加する機能はアップロードの進行状況バーと似ており、引き続き XMLHttpRequest オブジェクトと JavaScript を使用して実現できます。具体的には、コントローラーに非同期リクエストを送信し、ダウンロード プロセス中に進行状況バーをリアルタイムで更新できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Download</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#download").click(function (event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open("GET", "/download", true);
xhr.responseType = "blob";
xhr.onload = function () {
if (xhr.status === 200) {
var contentType = xhr.getResponseHeader("Content-Type");
var contentDisposition = xhr.getResponseHeader("Content-Disposition");
var blob = new Blob([xhr.response], {
type: contentType});
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = contentDisposition.split("=")[1];
link.click();
}
};
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
xhr.send();
});
});
</script>
</head>
<body>
<button id="download">Download</button>
<div style="background-color: #ddd; height: 20px; width: 0%;" id="progress"></div>
</body>
</html>
上記のコードでは、jQuery を使用して XHR リクエストを送信し、ダウンロードの進行中に進行状況バーを更新しました。具体的には、ファイルのダウンロード中にリアルタイムで進行状況バーを更新するために、xhr オブジェクトに進行状況イベント ハンドラーを追加しました。
結論は
この記事では、Springbootを使用してファイルのアップロードとダウンロードを実装し、リアルタイムプログレスバーの機能を追加する方法を紹介します。ファイルのアップロードおよびダウンロード時には、XMLHttpRequest オブジェクトと JavaScript を使用してリアルタイムの進行状況バーを実装しました。この機能は、ユーザーがファイルのアップロードとダウンロードの進行状況をよりよく理解し、ユーザー エクスペリエンスを向上させるのに役立ちます。