Widely available すべての主要ブラウザで対応済み。安心して使用可能。

File API

File インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。

File オブジェクトは通常、<input> 要素を使用してファイルを選択した結果として返される FileList オブジェクト、またはドラッグ＆ドロップ操作の DataTransfer オブジェクトから取得します。

File オブジェクトは特別な種類の Blob オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、以下の API は Blob と File の両方を受け付けます。

FileReader

URL.createObjectURL()

Window.createImageBitmap() および WorkerGlobalScope.createImageBitmap()

fetch() の body オプション

XMLHttpRequest.send()

詳しい情報や例は、ウェブアプリケーションからのファイルの使用を参照してください。

Blob File

ファイル・クリップボード・ストリーム

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`File`	13	12	7	4	18	3.2
`Blob` Blob インターフェイスは blob、すなわち不変の生データであるファイルのようなオブジェクトを表します。テキストやバイナリーデータとして読み込んだり、ReadableStream に変換してそのメソッドを使ったデータ処理をしたりすることができます。	5	12	4	6	18	6
`arrayBuffer` arrayBuffer() は Blob インターフェイスのメソッドで、 Blob の内容を ArrayBuffer 内のバイナリーデータとした解決するプロミス (Promise) を返します。	76	79	69	14	76	14.5
`Blob` Blob() コンストラクターは、新たな Blob オブジェクトを返します。その blob の中身は、引数 blobParts で与えられた値を連結したものから構成されています。	20	12	13	6	25	6
`bytes` bytes() は Blob インターフェイスのメソッドで、この Blob の内容をバイト配列として含む Uint8Array で解決するプロミス (Promise) を返します。	144	144	128	18	144	18
`size` size は Blob インターフェイスのプロパティで、この Blob または File の大きさをバイト単位で返します。	5	12	4	6	18	6
`slice` slice() は Blob インターフェイスのメソッドで、呼び出された blob のサブセットのデータを含む新しい Blob オブジェクトを作成して返します。	21	12	13	7	25	7
`stream` stream() は Blob インターフェイスのメソッドで、ReadableStream を返します。これは、読み取り時に、Blob に含まれるデータを返します。	76	79	69	14.1	76	14.5
`text` text() は Blob インターフェイスのメソッドで、 Promise を返しますが、それは Blob の内容を含む文字列で解決され、 UTF-8 として解釈されます。	76	79	69	14	76	14.5
`type` type は Blob インターフェイスの読み取り専用プロパティで、このファイルの MIME typeを返します。	5	12	4	6	18	6
`File` File() コンストラクターは、新しい File オブジェクトのインスタンスを生成します。	38	79	28	10.1	38	10.3
`lastModified` lastModified は File インターフェイスの読み取り専用プロパティで、ファイルの最終更新日時を UNIX 元期（1970 年 1 月 1 日の深夜 0 時）からのミリ秒数で返します。最終更新日時が分からないファイルは、現在の日時を返します。	13	18	15	10	18	10
`name` name は File インターフェイスの読み取り専用プロパティで、この File オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。	13	12	3.6	8	18	8
`FileList` FileList インターフェイスは、HTML の input 要素の files プロパティによって返されるこの型のオブジェクトを表します。これにより、要素で選択されたファイルのリストにアクセスできます。また、ドラッグ＆ドロップ API を使用する際、ウェブコンテンツにドロップされたファイルのリストにも使用されています。この使い方の詳細は、DataTransfer オブジェクトを参照してください。	2	12	3	4	18	3.2
`item` item() は FileList インターフェイスのメソッドは、ファイルリスト中の指定された位置のファイルを表す File オブジェクトを返します。	2	12	3	4	18	3.2
`length` length は FileList インターフェイスの読み取り専用プロパティで、FileList に含まれるファイルの数を返します。	2	12	3	4	18	3.2
`FileReader` FileReader オブジェクトを使用すると、ウェブアプリケーションは、ユーザーのコンピューターに保存されているファイル（または生のデータバッファー）の内容を非同期に読み取ることができます。File または Blob オブジェクトを使用して、読み込むファイルまたはデータを指定します。	6	12	3.6	6	18	6
`abort` abort メソッドは、読み取り操作を中止します。戻る時に、 FileReader.readyState が DONE になります。	6	12	3.6	6	18	6
`abort_event` abort イベントは、読み込みが中断されたときに発生します。例えば、プログラムが FileReader.abort() を呼び出した場合などです。	6	12	3.6	6	18	6
`error` FileReader の error プロパティは、ファイルの読み取り中に発生したエラーを返します。	6	12	3.6	6	18	6
`error_event` error イベントは、エラーによって読み取りが失敗したとき (例えば、ファイルが見つからなかった場合や読み取り可能ではなかった場合) に発生します。	6	12	3.6	6	18	6
`FileReader` FileReader() コンストラクターは、新しい FileReader を作成します。	6	12	3.6	6	18	6
`load_event` load イベントは、ファイルが正常に読み込めたときに発生します。	6	12	3.6	6	18	6
`loadend_event` loadend イベントは、ファイル読み込みが、成功したかどうかにかかわらず完了したときに発生します。	6	12	3.6	6	18	6
`loadstart_event` loadstart イベントは、ファイル読み込み操作が始まったときに発生します。	6	12	79	6	18	6
`progress_event` progress は FileReader インターフェイスのイベントで、FileReader がデータを読むときに定期的に発生します。	6	12	3.6	6	18	6
`readAsArrayBuffer` FileReader インターフェイスの readAsArrayBuffer() メソッドは、指定された Blob ないし File オブジェクトの内容を読み込むために使用します。読み込み処理が終了すると FileReader.readyState が DONE に変わり、 FileReader/loadend_event イベントが発行されます。それと同時に、 FileReader.result プロパティにはファイルのデータを表す ArrayBuffer が格納されます。	6	12	3.6	6	18	6
`readAsDataURL` readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、FileReader.readyState が DONE となり、FileReader/loadend_event が発生します。このとき、FileReader.result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。	6	12	3.6	6	18	6
`readAsText` readAsText() メソッドは、指定された Blob または File の内容を読み取るために使用します。読み取り操作が完了すると、 FileReader.readyState が DONE に変わり、 FileReader/loadend_event イベントが発生し、 FileReader.result プロパティにはファイルの内容が文字列として格納されます。	6	12	3.6	6	18	6
`readyState` FileReader の readyState プロパティは、 FileReader がいる読み取り操作の現在の状態を提供します。 FileReader は以下のいずれかの状態にあります。	6	12	3.6	6	18	6
`result` FileReader の result プロパティは、ファイルの内容を返します。このプロパティは、読み取り操作が完了した後でのみ有効で、データの形式は、読み取り操作を開始するために使用されたメソッドによって異なります。	6	12	3.6	6	18	6
`worker_support` 労働者で利用可能	6	12	46	6	18	6
`FileReaderSync` FileReaderSync インターフェイスにより、File または Blob オブジェクトを同期的に読み込むことができます。	7	12	8	6	18	6
`FileReaderSync` FileReaderSync() コンストラクターは、新しい FileReaderSync を作成します。	7	12	8	6	18	6
`readAsArrayBuffer` readAsArrayBuffer() は FileReaderSync インターフェイスのメソッドで、File または Blob オブジェクトを同期的に ArrayBuffer に読み込むことができます。このインターフェイスは、ブロックが発生する可能性のある同期 I/O を可能にするため、ワーカーでのみ利用可能です。	9	12	8	6	18	6
`readAsDataURL` readAsDataURL() は FileReaderSync インターフェイスのメソッドで、File または Blob オブジェクトを同期的に data URL を表す文字列に読み込むことができます。このインターフェイスは、ブロックが発生する可能性のある同期 I/O を可能にするため、ワーカーでのみ利用可能です。	7	12	8	6	18	6
`readAsText` readAsText() は FileReaderSync インターフェイスのメソッドで、File または Blob オブジェクトを同期的に文字列に読み込むことができます。このインターフェイスは、ブロックが発生する可能性のある同期 I/O を可能にするため、ワーカーでのみ利用可能です。	7	12	8	6	18	6
`worker_support` 労働者で利用可能	7	12	8	6	18	6
`createObjectURL_static` createObjectURL() は URL インターフェイスの静的メソッドで、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。	19	12	19	6	25	6
`revokeObjectURL_static` revokeObjectURL() は URL インターフェイスの静的メソッドで、以前に URL.createObjectURL_static を呼び出して生成された既存のオブジェクト URL を解放します。	19	12	19	6	25	6

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

実務での使いどころ

File API の活用

File インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

実務での使いどころ

File API の活用

注意点

実装メモ

参考リンク