JavaScriptによるファイル内容の読み込みと利用について

前提・実現したいこと

JavaScriptのFileReaderを利用してテキスト等のファイルを読み込み、関数内でその値を使おうとしています。しかし、以下のコードではテキストファイルから取得した内容を関数で使うことができません。JavaScriptコード内のresultから値を取り出すか、別の方法でテキストファイルの内容を関数内で使用したいです。

該当のソースコード

html
1<!--test.html-->
2<form id="testForm">
3  <input multiple="" id="inputFile" type="file"/>
4</form>
5<button id="button1">click</button>
6<script src="test.js"></script>

javaScript
1//test.js//
2function main() {
3    let inputFiles = document.getElementById('inputFile');
4    let result = [];
5    for (let i = 0; i < inputFiles.files.length; i++) {
6        let reader = new FileReader();
7        reader.onload = function () {
8            result.push(reader.result)
9        };
10        reader.readAsText(inputFiles.files[i]);
11
12    }
13    console.log('result',result);
14    console.log('result[0]',result[0]);
15    //ここでテキストの内容をString型として使いたい
16}
17
18let button1 = document.getElementById('button1');
19button1.addEventListener('click', main);

試したこと

ChromeでHTMLを開いて適当なテキストファイルを読み込み、コンソールを確認するとresultにファイルの内容は読み込まれているのですが、result[0]はundefinedとなりました。

行動規範の内容に同意します

回答1件

ベストアンサー

    for (let i = 0; i < inputFiles.files.length; i++) {
        let reader = new FileReader();
        reader.onload = function () {
            result.push(reader.result)
        };
        reader.readAsText(inputFiles.files[i]);

    }
    console.log('result',result);
    console.log('result[0]',result[0]);

上記箇所でjavascriptの仕様上、FileReaderのonloadにセットしたメソッドより先にconsole.logが動作していることが原因のようです。

    for (let i = 0; i < inputFiles.files.length; i++) {
        let reader = new FileReader();
        reader.onload = function () {
            result.push(reader.result)
            console.log('result',result);
            console.log('result[0]',result[0]);
        };
        reader.readAsText(inputFiles.files[i]);

    }

こちらで動作するのではないでしょうか？

追記
全ファイル読み込みを待ち合わせるのにはちょっと複雑になってしまうのですがPromiseを使用することで実現可能です
例えば下記のとおりです。

//test.js//
function main() {
    let inputFiles = document.getElementById('inputFile');
    console.log(inputFiles.value)
    console.log(inputFiles.files)
    let result = [];

    var promise = []
    for (let i = 0; i < inputFiles.files.length; i++) {
        promise.push(new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.onload = function () {
               result.push(reader.result)
               resolve()
            };
            reader.readAsText(inputFiles.files[i]);
        }))
    }
    Promise.all(promise).then(() => {
        console.log('result[0]',result[0]);
    })
    //ここでテキストの内容をString型として使いたい
}

let button1 = document.getElementById('button1');
button1.addEventListener('click', main);

投稿2020/07/26 14:55

編集2020/07/26 15:59

tetosept

総合スコア36

liang_x2

2020/07/26 15:26 編集

回答ありがとうございます。FileReaderとonloadの関係について理解することができました。実現したいことに関する質問なのですが、ファイルの読み込みを待った後にforループ後のコメントの位置でファイル内容のString型が入った配列を利用することは可能でしょうか。 onloadの関数内で他の関数を実行する以外の方法があれば教えていただけるとありがたいです。