JavaScript：テキストファイルを読み込む方法

JavaScriptでテキストファイルを読み込み、HTMLへ表示する方法です。

以下の例では「ファイルを選択」ボタンで選択したファイルの内容をテキストエリアへ表示するサンプルソースとなります。

HTMLサンプル

<form>
    <input id="testFile" type="file" name="file"><br>
    <textarea id="textArea"  name="txt" rows="5" cols="20"></textarea>
</form>

JavaScriptサンプル

FileReaderのreadAsTextメソッドでファイルを文字列として読込を実施
FileReaderのonloadメソッドでデータの読み込みが正常に完了した時にloadイベントが発生し、ここに設定したコールバック関数が呼び出されます

let input = document.getElementById('testFile');
let reader = new FileReader();
input.addEventListener('change', () => {
    for(file of input.files){
        //Fileオブジェクト(テキストファイル)のファイル内容を読み込む
        reader.readAsText(file, 'UTF-8');

        //ファイル読込後、内容をテキストエリアに出力する
        reader.onload = ()=> {
            document.getElementById("textArea").value = reader.result;
        };
    }
});