ファイル API

ファイル API は、ウェブアプリケーションがファイルとそのコンテンツにアクセスできるようにするためのものです。

ウェブアプリケーションは、ユーザーがファイルを利用可能にしたとき、すなわち file 型の <input> 要素を使用するか、ドラッグ＆ドロップを介するかのどちらかでファイルにアクセスすることができるようになります。

このようにして利用可能になった一連のファイルは FileList オブジェクトとして表され、ウェブアプリケーションが個々の File オブジェクトを取得することができるようになっています。そして、 File オブジェクトから、ファイル名、サイズ、型、最終更新日時などのメタデータにアクセスすることができます。

File オブジェクトを FileReader オブジェクトに渡すことで、ファイルの内容にアクセスすることができます。 FileReader インターフェイスは非同期ですが、ウェブワーカーでのみ利用できる同期バージョンが FileReaderSync インターフェイスで提供されています。

Blob

"Binary Large Object" を表し、不変の生データを持つファイルのようなオブジェクトを意味します。 Blob はテキストまたはバイナリーデータとして読み込むことができ、そのメソッドを使用してデータを処理できるように ReadableStream に変換されることがあります。

File

ファイルに関する情報を提供し、ウェブページ内の JavaScript がそのコンテンツにアクセスできるようにします。

FileList

HTML の <input> 要素の files プロパティが返す値です。これにより、 <input type="file"> 要素で選択されたファイルのリストにアクセスすることができます。また、ドラッグ & ドロップ API を用いてウェブコンテンツにドロップされたファイルのリストにも使用されます。この使用方法の詳細については、 DataTransfer オブジェクトを参照してください。

FileReader

ウェブアプリケーションが、ユーザーのコンピューターに保存されているファイル（または生データバッファー）の内容を、 File または Blob オブジェクトを使って非同期に読み込むことができるようにするもので、ファイルまたはデータを指定して読み込みます。

FileReaderSync

ウェブアプリケーションが、ユーザーのコンピューターに保存されているファイル（または生データバッファー）の内容を、 File または Blob オブジェクトを使って同期的に読み込むことができるようにするもので、ファイルまたはデータを指定して読み込みます。

URL.createObjectURL()

File または Blob オブジェクトを取得するために使用できる URL を作成します。

URL.revokeObjectURL()

URL.createObjectURL() を呼び出して作成された既存のオブジェクト URL を解放します。

この例では、 file 型の <input> 要素を用意しており、ユーザーがファイルを選択すると、最初に選択したファイルの内容をテキストとして読み込み、結果を <div> で表示します。

HTML

<input type="file" />
<div class="output"></div>

CSS

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

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

fileInput.addEventListener("change", () => {
  const [file] = fileInput.files;
  if (file) {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      output.innerText = reader.result;
    });
    reader.readAsText(file);
  }
})

• <input type="file">: file 型の入力要素
• DataTransfer インターフェイス