JavaScriptで選択された外部ファイルを出力する:FileReader

JavaScriptは主にブラウザ上で動くので、ここではユーザーがブラウザ上で選択したテキストファイルを読み込む方法について説明します。

ファイルを読み込むためにはFile APIを利用します。FileReaderオブジェクトを使ってsample.txtを読み込み、ファイル内容をテキストエリアに表示するサンプルプログラムについて見て行きましょう。

sample.txt

おおまかには、次のような手順となります。

  1. ブラウザ上でユーザーがファイルを選択する
  2. FileReaderオブジェクトを生成する
  3. 選択されたファイルを文字列として読み込む
  4. 読み込みが完了したら読み込んだ結果を表示する

サンプルプログラム

inputタグで読み込むファイルを選択できるようにします。また、読み込んだファイルの内容を表示するテキストエリアをつくります。

HTML

JavaScript

上記のサンプルプログラムでは、選択されたファイルの内容がテキストエリアに出力されます。

コードの説明

外部ファイルを読み込むためにはFileReaderオブジェクトを利用します。FileReaderオブジェクトの使い方は色々ありますが、ここではテキストファイルを読み込むために必要な次の3つを押さえておきましょう。

  • FileReaderオブジェクトの生成:変数 = new FileReader();
  • 文字列としてファイルを読み込む:変数.readAsText(Fileオブジェクト);
  • 読み込み結果を取得する: 変数.result

まず、ファイルが選択された際に行う処理を関数としてaddEventListner()に渡します。addEventListner()の第1引数"change"はファイルが選択されるというイベントを表し、第2引数にイベント発生時の処理を無名関数として定義しています。

関数内では、まず選択されたファイルをFileListオブジェクトとして取得します。FileListはinput要素オブジェクトのfilesプロパティで参照することができます(このため、ev.target.filesはele.filesと記述しても同様です)。

FileListは配列のように扱うことができますが、配列ではなくオブジェクトです。今回は選択するファイルが一つだけですが、複数のファイルを選択することもあるためにFileListを使います(複数ファイルを選択できるようにするには、inputタグにmultipleを追記します)。

次に、FileReaderオブジェクトを生成し、fileReaderオブジェクトのメソッドであるreadAsText()でファイルをテキスト形式で読み込みます。今回読み込むファイルは一つなので、引数はfileの先頭要素であるfile[0]となります。

readAsText()は非同期なので、読み込み結果を表示する処理はファイルの読み込みが完了した後に呼び出します。reader.onloadの「onload」は、読み込みが無事に完了したというイベントを表しています。読み込みが完了した際の処理として、右辺に読み込み結果であるreader.resultを表示する処理を関数として記述します。なお、addEventListner()を使って以下のように記述しても同様です。

以下にFileReaderオブジェクトのメソッド、プロパティ、及びイベントについて簡単にまとめます。

メソッド

readAsArrayBuffer() ファイルをArrayBufferとして読み込む
ReadAsText() ファイルをテキストとして読み込む
readAsDataURL() ファイルをDataURLとして読み込む
readAsBinaryString() ファイルをバイナリデータとして読み込む
abort() 読み込みを破棄する

プロパティ

state ファイル読み込み時のステータス
result 読み込んだファイルの内容を格納

イベント

onloadstart 読み込みの開始
onprogress 読み込み中
onabort 読み込みの破棄
onerror エラーの発生
onload 読み込み完了(成功)
onloadend  成否に関わらず読み込み完了

Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集