選択されたファイルを開きファイルの内容を読み込む - FileReader の利用 - JavaScript

FileReader を利用してJavaScriptで指定されたファイルの内容を読み込むコードを紹介します。

概要

FileReader オブジェクトを利用すると、ファイル参照ボックスで指定されたファイルや、Webブラウザにドラッグ＆ドロップされたファイルの内容にアクセスできます。この記事ではFileReader オブジェクトを用いたファイルの読み込みについて紹介します。

プログラム

コード

FileOpen.html

Webのフォームのページです。下記のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function OnButtonClick() {
      var fileRef = document.getElementById('File1');
      var outFrame = document.getElementById('output');

      if (1 <= fileRef.files.length) {
        var reader = new FileReader();
        reader.onload = function (theFile) {
          var outhtml = theFile.target.result;
          outhtml = outhtml.replace(/\r\n/g, '<br/>');

          outFrame.innerHTML = outhtml; // reader.result;
        }

        reader.readAsText(fileRef.files[0], "shift-jis");

      }
     
    }
  </script>

</head>
<body>
  <input id="File1" type="file" /><input id="Button1" type="button" value="開く" onclick="OnButtonClick();"/>
  <div id="output"></div>
</body>
</html>

解説

基本動作は、"Button1"をクリックするとOnButtonClick()関数を実行する実装になっています。ボタンクリック時のコード実行についてはこちらを参照してください。

OnButtonClick() 関数

var fileRef = document.getElementById('File1');
var outFrame = document.getElementById('output');

document.getElementById() メソッドを呼び出し、ファイル参照ボックスと出力のためのid=outputの枠のオブジェクトを取得します。

if (1 <= fileRef.files.length) {
    var reader = new FileReader();
    reader.onload = function (theFile) {
      var outhtml = theFile.target.result;
      outhtml = outhtml.replace(/\r\n/g, '<br/>');

      outFrame.innerHTML = outhtml; 
    }
    reader.readAsText(fileRef.files[0], "shift-jis");
  }
}

ファイル参照ボックスでファイルが参照されているか確認します。ファイル参照の有無は filesプロパティの配列長(files.length)が1以上かどうかで判定できます。ファイルが参照されている場合は、FileReader()オブジェクトを作成します。FileReaderは非同期で動作するため、ファイルの読み込みが完了した際にはFileReader.onload イベントが実行されます。

    reader.onload = function (theFile) {
      var outhtml = theFile.target.result;
      outhtml = outhtml.replace(/\r\n/g, '<br/>');

      outFrame.innerHTML = outhtml; 
    }

FileReader.onload を実装します。ファイルが読み込み完了した場合、先に取得した出力のためのid=outputの枠に読み取り結果を表示します。ファイルの読み取り内容は、onloadイベントの引数のtarget.result プロパティに格納されます。

    reader.readAsText(fileRef.files[0], "shift-jis");

FileReader.readAsText() メソッドにより、ファイルの読み込みを実行します。第一引数にはファイルを開くFileオブジェクトを、第二引数には文字エンコーディングを与えます。ファイルオブジェクトはファイル参照ボックスで選択したファイルを利用しますが、利用するのは最初に選択されたファイル(multiple属性が無効の場合は選択されたファイル)を用いるため、Fileオブジェクトはfiles[0]を指定しています。