JavaScriptで選択されたファイルを開きファイルの内容を読み込む - 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]を指定しています。

データの準備

テキストファイルを準備します。今回は、"readme.txt"と"はじめに.txt"の2ファイルを用意しました。
ファイルの内容は下図の通りです。


実行結果

プロジェクトを実行し、"FileOpen.html"ファイルを開きます。


[参照]ボタンをクリックします。下図のファイル選択ダイアログが表示されます。ファイルを選択します。


ファイルが選択されました。


[開く]ボタンをクリックします。選択されたファイルを開きファイルの内容をファイル選択ボックスの下部に表示します。先ほどメモ帳で各印した内容と同じものが表示されています。~

別のファイルでも確認します。


こちらのファイルでも、ファイルの内容がファイル選択ボックスの下部に表示されました。

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)