回答編集履歴
4
文言修正
test
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
エレメントのfilesはFileオブジェクトはBlob形式のオブジェクトで今回のケースのように扱うにはロードしてあげなければなりません。
|
|
24
24
|
[MDN Web Docs(File)](https://developer.mozilla.org/ja/docs/Web/API/File)
|
|
25
25
|
|
|
26
|
-
その
|
|
26
|
+
そのロードはFileReaderを用いて行います。
|
|
27
27
|
[MDN Web Docs(FileReader)](https://developer.mozilla.org/ja/docs/Web/API/FileReader)
|
|
28
28
|
|
|
29
29
|
今回のケースでは、「FileReader.readAsDataURL」を使用します。
|
3
補足追記
test
CHANGED
|
@@ -16,4 +16,32 @@
|
|
|
16
16
|
// ファイル読み込み
|
|
17
17
|
reader.readAsDataURL(file);
|
|
18
18
|
```
|
|
19
|
+
---
|
|
20
|
+
### 補足
|
|
19
21
|
|
|
22
|
+
**ファイルの扱いについて**
|
|
23
|
+
エレメントのfilesはFileオブジェクトはBlob形式のオブジェクトで今回のケースのように扱うにはロードしてあげなければなりません。
|
|
24
|
+
[MDN Web Docs(File)](https://developer.mozilla.org/ja/docs/Web/API/File)
|
|
25
|
+
|
|
26
|
+
その読込はFileReaderを用いて行います。
|
|
27
|
+
[MDN Web Docs(FileReader)](https://developer.mozilla.org/ja/docs/Web/API/FileReader)
|
|
28
|
+
|
|
29
|
+
今回のケースでは、「FileReader.readAsDataURL」を使用します。
|
|
30
|
+
このファンクションの引数としてFileオブジェクトを渡してやります。
|
|
31
|
+
```javascript
|
|
32
|
+
reader.readAsDataURL(file);
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
すると、このFileReaderの「onload」イベントが発火するので、ファイルの扱いたい情報はこの「onload」イベントに実装します。
|
|
36
|
+
```javascript
|
|
37
|
+
reader.onload = function (e) {
|
|
38
|
+
// ファイルの読み込みが完了した後、用意したimgに設定
|
|
39
|
+
document.querySelector("img").attr("src", e.target.result);
|
|
40
|
+
};
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
ここで注意すべきことは、処理をイベントないに書くため、非同期的な処理として動作することです。
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
2
ソース修正
test
CHANGED
|
@@ -14,6 +14,6 @@
|
|
|
14
14
|
document.querySelector("img").attr("src", e.target.result);
|
|
15
15
|
};
|
|
16
16
|
// ファイル読み込み
|
|
17
|
-
r.readAsDataURL(f);
|
|
17
|
+
reader.readAsDataURL(file);
|
|
18
18
|
```
|
|
19
19
|
|
1
ソースコード修正
test
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
const reader = new FileReader();
|
|
12
12
|
reader.onload = function (e) {
|
|
13
13
|
// ファイルの読み込みが完了した後、用意したimgに設定
|
|
14
|
-
|
|
14
|
+
document.querySelector("img").attr("src", e.target.result);
|
|
15
15
|
};
|
|
16
16
|
// ファイル読み込み
|
|
17
17
|
r.readAsDataURL(f);
|