作るもの２つ
- Ajaxで画像をアップロードして、サーバーに格納後に表示する
- 表示する画像を選択して画像表示ボタンを押すと、Ajaxでダウンロードして画像が表示される
デモ画面
1. ファイルアップロード
- 画面側
imageajax.html（一部）
<body>
<h3>ファイルアップロード</h3>
<form id="imageFormId">
<input type="file" name="inputFileName" />
<button type="button" onclick="uploadImage('imageFormId', 'myUploadedImageId')">画像アップロード</button>
</form>
<img id="myUploadedImageId" style="width: 400px">
<script>
function uploadImage(imgForm, imgCtrl) {
const formData = new FormData(document.getElementById(imgForm));
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const img = document.getElementById(imgCtrl);
const url = window.URL || window.webkitURL;
// レスポンスを画像表示する
img.src = url.createObjectURL(this.response);
}
}
request.open("POST", "/uploadimage");
request.responseType = 'blob';
request.send(formData);
}
</script>
</body>
- コントローラ側
ImageAjaxController（一部）
/**
* ファイルアップロード
*/
@PostMapping("/uploadimage")
public ResponseEntity<byte[]> uploadImage(@RequestParam("inputFileName") final MultipartFile uploadFile) {
if (uploadFile.isEmpty()) {
return ResponseEntity.of(Optional.empty());
}
// アップロードされたファイルを格納するためのPathを取得
final Path path = Paths.get("c:/uploaddir", uploadFile.getOriginalFilename());
final byte[] bytes;
try {
// アップロードされたファイルのバイナリを取得
bytes = uploadFile.getBytes();
// ファイルの格納
Files.write(path, bytes);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}
- アップロードするファイルは上限1MBなので、それ以上のサイズをアップロードするには、以下のように設定する
application.yml
spring:
servlet:
multipart:
max-file-size: 30MB
max-request-size: 30MB
2. ファイル選択
- 画面側
imageajax.html（一部）
<body>
<h3>ファイル選択</h3>
<select id="selectImageId">
<option value="a">a</option>
<option value="b">b</option>
</select>
<button type="button" onclick="displayImage('selectImageId', 'mySelectedImageId')">画像表示</button>
<img id="mySelectedImageId" style="width: 400px">
<script>
function displayImage(selectCtrl, imgCtrl) {
const select = document.getElementById(selectCtrl);
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const img = document.getElementById(imgCtrl);
const url = window.URL || window.webkitURL;
// レスポンスを画像表示する
img.src = url.createObjectURL(this.response);
}
}
// 選択肢を送って、ファイルを取得する
request.open("GET", "/selectimage/" + select.value);
request.responseType = 'blob';
request.send();
}
</script>
</body>
- コントローラ側
ImageAjaxController（一部）
/**
* ファイル選択
*/
@GetMapping("/selectimage/{selectNum}")
public ResponseEntity<byte[]> getImage(@PathVariable final String selectNum) {
// 選択肢からファイル名取得
final String fileName;
switch (selectNum) {
case "a":
fileName = "a.jpg";
break;
case "b":
fileName = "b.jpg";
break;
default:
return ResponseEntity.of(Optional.empty());
}
// ファイルのPath
final Path path = Paths.get("c:/selectdir", fileName);
final byte[] bytes;
try {
// ファイルを読み込む
bytes = Files.readAllBytes(path);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}