回答編集履歴

1

複数ファイル選択時に全ファイル読み込み完了後をPromiseで待ち合わせることも可能

2020/07/26 15:59

投稿

tetosept
tetosept

スコア36

test CHANGED
@@ -49,3 +49,67 @@
49
49
  ```
50
50
 
51
51
  こちらで動作するのではないでしょうか?
52
+
53
+
54
+
55
+ **追記**
56
+
57
+ 全ファイル読み込みを待ち合わせるのにはちょっと複雑になってしまうのですがPromiseを使用することで実現可能です
58
+
59
+ 例えば下記のとおりです。
60
+
61
+ ```ここに言語を入力
62
+
63
+ //test.js//
64
+
65
+ function main() {
66
+
67
+ let inputFiles = document.getElementById('inputFile');
68
+
69
+ console.log(inputFiles.value)
70
+
71
+ console.log(inputFiles.files)
72
+
73
+ let result = [];
74
+
75
+
76
+
77
+ var promise = []
78
+
79
+ for (let i = 0; i < inputFiles.files.length; i++) {
80
+
81
+ promise.push(new Promise((resolve, reject) => {
82
+
83
+ let reader = new FileReader();
84
+
85
+ reader.onload = function () {
86
+
87
+ result.push(reader.result)
88
+
89
+ resolve()
90
+
91
+ };
92
+
93
+ reader.readAsText(inputFiles.files[i]);
94
+
95
+ }))
96
+
97
+ }
98
+
99
+ Promise.all(promise).then(() => {
100
+
101
+ console.log('result[0]',result[0]);
102
+
103
+ })
104
+
105
+ //ここでテキストの内容をString型として使いたい
106
+
107
+ }
108
+
109
+
110
+
111
+ let button1 = document.getElementById('button1');
112
+
113
+ button1.addEventListener('click', main);
114
+
115
+ ```