FileAPIを利用するとJavascriptを利用してファイルの中身を取得する事が出来ます。
各種ブラウザの実装状況は caniuse から確認可能です。
File API を利用する
FileAPIに対応したブラウザでは、input[type=file]のHTML要素からFileオブジェクトを取得する事が出来ます。
DOMのオブジェクトにfilesというキーが生えており、ココに配列形式でFileオブジェクトが格納されている形になります。
(input[type=file]ではmultipleプロパティを指定して複数ファイルの選択が可能)
jQuery で利用する場合
jQuery ではinput要素を選択する事で、DOMを取得できます。
$("input[type='file']")[0].files
イベントで利用する際には、eventオブジェクトのtarget属性からデータを取得します。
$("#fileForm").on("change",function(e){
console.log(e.target.files[0])
console.log(this,e);
})
Fileオブジェクトを利用するとファイルに関する様々な情報が取得可能です。
- lastModified: 最終更新日時
- name: ファイル名
- size: ファイルサイズ
- type: mime型
Fileの中身そのものを読み取るには、非同期のFileReaderを利用する必要があります。
File Reader でファイルを取得する
ファイルの読み込みは非同期に行われ、readerオブジェクトに登録したイベントから読み込み完了後のイベントを取得します。
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result)
}
reader.readAsDataURL(file);
readerオブジェクトのイベントは、onloadの他にも様々なものがあります。
- onabort : 読み込み処理が中断された際にイベントが発火
- onerror : 読込中にエラーが生じたときにイベントが発火
- onload : 読込が成功したときにイベントが発火
- onloadstart : 読込が開始されたときにイベントが発火
- onloadend : 成功・失敗に問わず読込が終了したときにイベントが発火
- onprogress : ファイルの読込中にイベントが発火
各イベントでは、targetプロパティからreaderオブジェクトを参照することができ、各種プロパティを参照することでファイルの読み込み状態を参照可能です。
- error : ファイルの読込中に発生したエラー
- readyState : 状態変数を格納するプロパティ(0: 読み込み前、1: 読込中、2:処理終了)
- result : 読み込み完了後に有効となるファイルのコンテンツを格納するプロパティ
ファイルの読み込みはreadAsDataURL()メソドにfileオブジェクトを渡して行います。
データはresultプロパティにdataURL形式で格納されます。
生のテキストデータを取得するためのreadAsText,生のバイナリデータを取得するためのreadAsArrayBufferなどのメソドも利用可能です。
ファイルの読み込みを中断するにはabortメソドが利用可能です。