FileReader.readAsText()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

readAsText() メソッドは、指定された Blob または File の内容を読み取るために使用します。読み取り操作が完了すると、 readyState が DONE に変わり、 loadend イベントが発生し、 result プロパティにはファイルの内容が文字列として格納されます。

メモ: Blob.text() メソッドは、ファイルをテキストとして読み取るための新しいプロミスベースの API です。

メモ: このメソッドは、ファイルの内容全体をメモリーに読み込みますので、巨大なファイルには適していません。巨大なファイルには readAsArrayBuffer() の方が適しています。

構文

js
readAsText(blob)
readAsText(blob, encoding)

引数

blob

メソッドで読み込む Blob または File オブジェクトです。

encoding 省略可

読み込みの際に使用する文字エンコーディングを指定する文字列です。この引数が指定されなかった場合は UTF-8 で解釈されます。

返値

なし (undefined)。

例

HTML

html
<input type="file" onchange="previewFile()" /><br />
<p class="content"></p>

JavaScript

js
function previewFile() {
  const content = document.querySelector(".content");
  const [file] = document.querySelector("input[type=file]").files;
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // this will then display a text file
      content.innerText = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsText(file);
  }
}

結果

仕様書

Specification
File API
# readAsDataText

ブラウザーの互換性

BCD tables only load in the browser

関連情報