JavaScriptでローカルからアップロードしたファイルをテキストファイルとして読み込むreadAsText()メソッドの使い方
ローカルからアップロードしたファイルをテキストファイルとして読み込む
input要素で選択したファイルのデータにアクセスするには,FileReaderオブジェクトの利用が必要です。
FileReaderオブジェクトのreadAsText()メソッドを使うことで、ファイルをテキストファイルとして読み込むことが可能です。
この処理は非同期で行われるため、loadイベントで読み込み完了のタイミングを監視して処理を追加する流れになります。
メソッド
| メソッド | 意味 | 返り値 |
|---|---|---|
| readAsText(ファイル) | ファイルをテキストファイル扱いで読み込む | なし |
サンプルコード
サンプルコードとしてテキストファイルの読み込みが完了した際に、そのテキストファイルの内容をページ上に表示するコードを紹介します。
Output
Pug
#targetArea
input#targetFileButton.form-control-file(type="file" accept=".txt")
#fileSourceTextHTML
<div id="targetArea">
<input class="form-control-file" id="targetFileButton" type="file" accept=".txt"/>
</div>
<div id="fileSourceText"></div>JavaScript
const targetFileButton = document.getElementById( 'targetFileButton' );
const fileSourceText = document.getElementById( 'fileSourceText' );
targetFileButton.addEventListener( 'change', onChange );
function onChange( event ) {
const targetFileTarget = event.target;
//取得される値は配列
const targetFiles = targetFileTarget.files;
//配列なので最初の値だけ格納
const targetFiles0 = targetFiles[0];
//FileReaderのインスタンスを作成する
const fileReader = new FileReader();
//テキストファイルとして読み込む
fileReader.readAsText(targetFiles0);
//読み込み完了時の処理(ファイルの読み込み作業は非同期なのでreadAsTextイベントの完了を監視)
fileReader.addEventListener('load', () => {
//読み込み後はresultプロパティに格納される
fileSourceText.textContent = fileReader.result;
});
}
