FileReader: result プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

メモ: この機能はウェブワーカー内で利用可能です。

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

値

読み取り操作を開始するためにどの読み取りメソッドが使用されたかに基づく、適切な文字列または ArrayBuffer です。読み取りがまだ完了していないか、失敗した場合は、値は null になります。

結果の型は以下の通りです。

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

例

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

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

// この HTMLInputElement (type="file") があるとする
// <input id="image" type="file" accept="image/*">

function reader(file, callback) {
  const fr = new FileReader();
  fr.onload = () => callback(null, fr.result);
  fr.onerror = (err) => callback(err);
  fr.readAsDataURL(file);
}

document.querySelector("#image").addEventListener("change", (evt) => {
  // ファイルがないので、何もしない
  if (!evt.target.files) {
    return;
  }
  reader(evt.target.files[0], (err, res) => {
    console.log(res); // Base64 `data:image/...` String result.
  });
});

FileReader は非同期であるため、プロミスベースの手法を使用することができます。以下は、multiple 属性を持つファイル入力要素の例で、Promise を返します。

// この HTMLInputElement があったとする
// <input id="images" type="file" accept="image/*" multiple>

const reader = (file) =>
  new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.onload = () => resolve(fr);
    fr.onerror = (err) => reject(err);
    fr.readAsDataURL(file);
  });

async function logImagesData(fileList) {
  let fileResults = [];
  const frPromises = fileList.map(reader);

  try {
    fileResults = await Promise.all(frPromises);
  } catch (err) {
    // この特定の場合では、FileList をユーザーが最初に選択した
    // ファイルのサブセットに変更するのは容易ではないため、
    // Promise.all() の方が Promise.allSettled() より適しているかも
    // しれません。したがって、操作全体を一時的に保留しておきましょう。
    console.error(err);
    return;
  }

  fileResults.forEach((fr) => {
    console.log(fr.result); // Base64 `data:image/...` String result.
  });
}

// HTMLInputElement type="file" のイベントハンドラー
document.querySelector("#images").addEventListener("change", (evt) => {
  // ファイルがない場合は、何もしない。
  if (!evt.target.files) {
    return;
  }
  logImagesData([...evt.target.files]);
});