JavaScriptでテキストファイルを読み込み、HTMLへ表示する方法です。
以下の例では「ファイルを選択」ボタンで選択したファイルの内容をテキストエリアへ表示するサンプルソースとなります。
HTMLサンプル
|
1 2 3 4 |
<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イベントが発生し、ここに設定したコールバック関数が呼び出されます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; }; } }); |
実行サンプル