テキストファイルを読み込む－JavaScript入門（HTML5編）

HOME
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="40" 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で取得し、テキストエリアに書き出しています。

前へ次へ