FileReader.result

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

FileReader の result プロパティは、ファイルの内容を返します。このプロパティは、読み取り操作が完了した後でのみ有効で、データの形式は、読み取り操作を開始するために使用されたメソッドによって異なります。

readAsArrayBuffer()	result はバイナリーデータを含む JavaScript の ArrayBuffer になります。
readAsBinaryString()	result にはファイルから生のバイナリーデータが文字列で格納されます。
readAsDataURL()	result はファイルのデータを表す data: URL の文字列になります。
readAsText()	result は文字列のテキストです。

例

この例は、ファイル入力欄からファイルを読み込む関数 read() を示しています。これは FileReader オブジェクトを作成し、 load イベントのリスナーを作成し、ファイルが読み込まれるとその result を取得し、提供されたコールバック関数を read() に渡すことによって機能します。

内容は生のテキストデータとして扱われます。

js
const fileInput = document.querySelector('input[type="file"]');

function read(callback) {
  const file = fileInput.files.item(0);
  const reader = new FileReader();

  reader.onload = () => {
    callback(reader.result);
  };

  reader.readAsText(file);
}