File オブジェクトは Blob を継承しており、ファイルシステムに関連した機能が拡張されています。
File の入手方法は2つあります。
1つ目は、Blob に似たコンストラクタを用いる方法です:
new File(fileParts, fileName, [options])fileParts–Blob同様、Blob/BufferSource/文字列値 の配列ですfileName– ファイル名(文字列)ですoptions– オプションのオブジェクトです:lastModified– 最後に変更された日付のタイムスタンプです(整数値)。
2つ目は、<input type="file"> やドラッグドロップ、あるいは他のブラウザインタフェースを使用して、ファイルを取得する方法です(こちらの方が多いです)。
例:
<input type="file" onchange="showFile(this)">
<script>
function showFile(input) {
let file = input.files[0];
alert(`File name: ${file.name}`); // e.g my.png
alert(`Last modified: ${file.lastModified}`); // e.g 1552830408824
}
</script>注意:
入力は複数のファイルを選択する可能性があるので、input.files は配列ライクなオブジェクトになります。ここは1つのファイルしかないので、単に input.files[0] としています。
FileReader
FileReader は Blob (なので File も)オブジェクトからデータを読み込むことのみを目的としたオブジェクトです。
ディスクからの読み込みは時間がかかる場合があるので、イベントを使用してデータを渡します。
コンストラクタです:
let reader = new FileReader(); // 引数はありません主なメソッド:
readAsArrayBuffer(blob)–ArrayBufferとしてデータを読み込みますreadAsText(blob, [encoding])– 文字列(デフォルトではエンコーディングはutf-8です)としてデータを読み込みますreadAsDataURL(blob)– データを base64 データurl にエンコードしますabort()– 操作をキャンセルします
読み込み処理には、次のイベントがあります:
loadstart– ロード開始progress– 読み取り中load– エラーなく読み取り完了abort–abort()キャンセルされたerror– エラーが発生したloadend– 読み込みが成功または失敗で終了
読み込みが終了すると、結果にアクセスできます:
reader.resultは結果です(成功している場合)reader.errorはエラーです(失敗した場合)