File APIは、ローカルファイルの内容を読み込むことができる仕組み(API)です。

ローカルファイルを読み込むためには、 ファイル選択フィールド(<input type="file" />)
や「ドラッグ＆ドロップ」などでユーザが明示的にファイルを指定する必要があります。

File APIは、以下の2つのインターフェースを持ちます。

File インターフェース

選択されたファイルの情報を取得することができます。

FileReader インターフェース

選択されたファイルの内容を読み込むことができます。

また、「FileListシーケンス」によって、複数のファイルを選択し、FileListとして取得することができます。

各ブラウザの対応

File APIは、2011年8月現在以下のブラウザで対応しています。
FireFox 3.6～、Google Chrome 6～
(Safari 5 は、一部の機能のみ)

File インターフェースは、選択されたファイルの情報を取得することができます。

得られる情報は以下の通りです。

name

ファイル名

size

ファイルのサイズ
単位はバイトです。

type

ファイルの種類
MIMEタイプです。

urn

ファイルのURN

// ファイル選択フィールド
var obj = document.getElementById('file01');
var str = "";
try{
	// FileListの取得
	var files = obj.files;
	// Fileオブジェクトの取得
	var file = files[0];
	// 選択ファイルの名前
	str += "ファイル名: " + file.name + "\n";
	// 選択ファイルのサイズ
	str += "ファイルサイズ: " + file.size + "Byte\n";
	// 選択ファイルの種類
	str += "ファイルの種類: " + file.type + "\n";
}
catch(e){
	str += e.message;
}
alert(str);

FileReader インターフェースは、選択されたファイルの内容を読み込むことができます。

FileReaderオブジェクトの生成

まず、FileReaderオブジェクトの生成を生成します。

var reader = new FileReader();

ファイル読み込み時のイベントを定義

選択したファイルを読み込んだ際に発生する処理を定義します。

reader.onload = function( event){
	/*
	ここに、選択したファイルと読み込んだ際の
	処理を定義します。
	*/
}

選択したファイルの読み込み

選択したファイルを読み込みます。
読み込みは、FileReaderオブジェクトのメソッドで行います。
FileReaderオブジェクトのメソッドは以下の通りです。

FileReader.readAsText(blob, encoding)

テキストファイルとして読み込みます。
第1引数 blob には、Fileオブジェクトを指定します。
第2引数 encoding には、文字コードを指定します。
指定した文字コードとファイルで使用されている文字コードが異なると文字化けするので注意してください。

FileReader.readAsDataURL(blob)

読み込んだデータを Data URL スキームとして出力します。
第1引数 blob には、Fileオブジェクトを指定します。
バイナリデータもそのまま扱えます。
結果を<img>要素や<audio>要素、<video>要素のsrc属性の値とすれば、そのまま画像や音声、動画として扱えます。

FileReader.readAsBinaryString(blob)

バイナリ文字列としてデータを読み込みます。
第1引数 blob には、Fileオブジェクトを指定します。

FileReader.readAsArrayBuffer(blob)

ArrayBufferとしてデータを読み込みます。
第1引数 blob には、Fileオブジェクトを指定します。

テキストファイルの読み込み例

// ファイル選択フィールド
var obj = document.getElementById('file01');
// FileListの取得
var files = obj.files;
// Fileオブジェクトの取得
var file = files[0];

// テキスト系ファイルのみ
if( ! file.type.match("text")){
	alert("テキスト系のファイルを選択してください。");
	return;
}

// FileReaderオブジェクト
var reader = new FileReader();

// ファイルを読み込んだ時の処理
reader.onload = function( evt ){
	var fcnt = document.getElementById('fcnt');
	fcnt.innerHTML = evt.target.result;
}

// テキストファイルとして読み込み
reader.readAsText(file, "utf-8");

FileListシーケンスとは、複数のファイルを選択し、FileListとして取得することができます。
<input type="file" />に、「multiple」属性を追加することによって複数ファイルの選択が可能になります。

<form>
	<label for="file03">ファイル:</label>
	<input id="file03" type="file" onchange="myfile03();" multiple />
</form>
<script>
// FileListシーケンス
function myfile03(){
	// ファイル選択フィールド
	var obj = document.getElementById('file03');
	var str = "";
	try{
		// FileListの取得
		var files = obj.files;
		// FileListの各ファイル
		for( var i=0; i < files.length; i++){
			str += "第" + (i + 1) + "ファイル名: " + files[i].name + "\n";
		}
	}
	catch(e){
		str += e.message;
	}
	alert(str);
}
</script>