FileReader.readAsText()

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

関連情報