ファイル 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()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); } }); 結果
仕様書
| Specification |
|---|
| File API |
関連情報
<input type="file">: file 型の入力要素DataTransferインターフェイス