回答編集履歴

4

Improve readability

2016/09/17 17:50

投稿

syuilo
syuilo

スコア393

test CHANGED
@@ -20,9 +20,9 @@
20
20
 
21
21
  以下のように書いてみてください。
22
22
 
23
- Riotは、this.でアクセスできるメンバーにバインドできます。
23
+ Riotは、``this.``でアクセスできるメンバーにバインドできます。
24
24
 
25
- また、内部で非同期処理の後、プロパティを更新する場合は明示的に``update``を呼び出す必要があります。
25
+ また、**内部で非同期処理の後、プロパティを更新する場合は明示的に``update``を呼び出す必要があります。**
26
26
 
27
27
 
28
28
 

3

Use const

2016/09/17 17:49

投稿

syuilo
syuilo

スコア393

test CHANGED
@@ -30,9 +30,9 @@
30
30
 
31
31
  this.onChange = (e) => {
32
32
 
33
- var fileData = e.target.files[0];
33
+ const fileData = e.target.files[0];
34
34
 
35
- var fileType = fileData.type;
35
+ const fileType = fileData.type;
36
36
 
37
37
 
38
38
 
@@ -44,7 +44,9 @@
44
44
 
45
45
  }
46
46
 
47
+
48
+
47
- var reader = new FileReader();
49
+ const reader = new FileReader();
48
50
 
49
51
 
50
52
 

2

追記に対して追記

2016/09/17 17:44

投稿

syuilo
syuilo

スコア393

test CHANGED
@@ -9,3 +9,69 @@
9
9
  const filename = this.fileInput.files[0].name;
10
10
 
11
11
  ```
12
+
13
+
14
+
15
+ 追記に対して
16
+
17
+ -----------
18
+
19
+
20
+
21
+ 以下のように書いてみてください。
22
+
23
+ Riotは、this.でアクセスできるメンバーにバインドできます。
24
+
25
+ また、内部で非同期処理の後、プロパティを更新する場合は明示的に``update``を呼び出す必要があります。
26
+
27
+
28
+
29
+ ```javascript
30
+
31
+ this.onChange = (e) => {
32
+
33
+ var fileData = e.target.files[0];
34
+
35
+ var fileType = fileData.type;
36
+
37
+
38
+
39
+ if(!fileType.match(/^image/)) {
40
+
41
+ alert('画像を選択してください');
42
+
43
+ return;
44
+
45
+ }
46
+
47
+ var reader = new FileReader();
48
+
49
+
50
+
51
+ reader.onerror = () => {
52
+
53
+ alert('ファイル読み取りに失敗しました')
54
+
55
+ };
56
+
57
+
58
+
59
+ reader.onload = () => {
60
+
61
+ this.preview = true;
62
+
63
+ this.previewSrc = reader.result;
64
+
65
+ this.update();
66
+
67
+ console.log(preview);
68
+
69
+ };
70
+
71
+
72
+
73
+ reader.readAsDataURL(fileData);
74
+
75
+ };
76
+
77
+ ```

1

Add example

2016/09/17 17:41

投稿

syuilo
syuilo

スコア393

test CHANGED
@@ -1,3 +1,11 @@
1
1
  Riotにそういった機能はありません。公式ドキュメントに書いてあることが全てで、非常にシンプルです。
2
2
 
3
3
  name属性を与えた要素には``this.hoge``のようにしてアクセスできるので、それでファイルを取得します。
4
+
5
+
6
+
7
+ ```javascript
8
+
9
+ const filename = this.fileInput.files[0].name;
10
+
11
+ ```