FileReaderを使ってローカルにあるテキストファイルを読み込む方法を解説

HOME
更新日:2017.03.02
HOMEJavaScript入門(HTML5編) > テキストファイルを読み込む

テキストファイルを読み込む-JavaScript入門(HTML5編)

前のページではファイル選択ダイアログの出し方を見ました。 ここではそれを利用してローカルにあるテキストファイルを選択し、 テキストエリアに読み込む方法を見ていきたいと思います。

テキストを読み込む

ローカルにあるファイルを読み込むには、FileReaderを使います。以下に使い方を掲載します。

変数 = new FileReader()
FileReaderを作成し、変数に格納します。
変数.readAsText(Fileオブジェクト)
テキスト形式でファイルを読み込みます。
変数.result
読込結果を取り出します。

以下のサンプルでテキストファイルを読み込みますが、このページの文字コードがUTF-8なので、 UTF-8形式のテキストでないと字化けします。もしUTF-8形式のテキストファイルが無ければ、 以下のサンプルテキストをご利用下さい。

sample.txt(右クリックして保存して下さい)

下のサンプルでは、ボタンを押してテキストファイルを選択すると、 ファイルの内容が下のテキストエリアに表示されます。

<サンプル>


このサンプルのスクリプトは以下の通りです。

<form name="test">
<input type="file" id="selfile"><br>
<textarea name="txt" rows="10" cols="50" readonly></textarea>
</form>

<script>
var obj1 = document.getElementById("selfile");

//ダイアログでファイルが選択された時
obj1.addEventListener("change",function(evt){

  var file = evt.target.files;

  //FileReaderの作成
  var reader = new FileReader();
  //テキスト形式で読み込む
  reader.readAsText(file[0]);
  
  //読込終了後の処理
  reader.onload = function(ev){
    //テキストエリアに表示する
    document.test.txt.value = reader.result;
  }
},false);
</script>

スクリプトの解説

上記のスクリプトを詳しく見ていきます。

フォーム部分

<form name="test">
<input type="file" id="selfile"><br>
<textarea name="txt" rows="10" cols="50" readonly></textarea>
</form>

フォームにファイル選択のボタンとテキストエリアを設置します。 後でテキストエリアにデータを書き換えるため、name属性を付けています。

ファイルが選択された時の処理

var obj1 = document.getElementById("selfile");

obj1.addEventListener("change",function(evt){

},false);

続いてスクリプト部分を見ていきます。最初にgetElementById()でinputタグを取得し、変数obj1に格納しています。 その後addEventListener()で、changeイベントを追加し、ファイルが選択された場合の処理を記述するようにしました。

テキストファイルを読み込む

var file = evt.target.files;

var reader = new FileReader();
reader.readAsText(file[0]);

今度はファイルが選択された場合の処理を見ていきましょう。最初はtarget.filesで選択されたファイルを取得し、 変数fileに格納しています。

次にFileReaderを作成し、変数readerに格納します。

続いてreadAsText()を使って、テキスト形式でファイルを読み込みます。 カッコ内は先ほどダイアログで選択したファイルを指定します。但し変数fileは配列形式だったので(前項参照)、 その1番目の要素を指定しています。

読込が完了した時の処理

reader.onload = function(ev){
  document.test.txt.value = reader.result;
}

今度は読み込みが完了した時の処理を見ていきましょう。 読込完了時の処理はonloadイベントハンドラに記述します。 読み込んだテキストをreader.resultで取得し、テキストエリアに書き出しています。