js　File API

js

File APIでは、ブラウザ上でユーザーがフォームから選択したファイルやユーザーがドラッグ＆ドロップしたファイルを扱うことができる。
ファイルが選択されたときに取得する事ができるFileListオブジェクトには、ユーザーが選択したファイルを格納される。

ぞれぞれのファイルはFileオブジェクトとして表現さる。
複数のファイルを選択したときは、ファイルリストのlengthプロパティから取得できる。

FileListオブジェクトのAPI

FileListのプロパティ
length: 含まれるファイル数
FileListのメソッド
item: 指定されたn番目のFileオブジェクトを返す

BlobオブジェクトのAPI

バイナリデータを扱うためのオブジェクト。

Blogのプロパティ
site: Blobオブジェクトのバイト数
type: Blobオブジェクトのメディアタイプ
Blogのメソッド
slice(): 指定したバイトレンジの新しいBlobオブジェクトを返す
close(): Blobオブジェクトの利用を終了

FileオブジェクトのAPI

FileはBlobを継承する。

Fileのプロパティ
name: ファイル名
lastModifiedDate: ファイルが最終更新日
<input id="files" type="file" name="files[]" multiple>
<div id="list"></div>

;(function() {
	document.addEventListener('DOMContentLoaded', function() {
			change();
	}, false);

	// ファイルが選択されたときに呼ばれる関数
	function handleFileSelect(e) {
		// 選択されたファイル群のFileListオブジェクト
		var files = e.target.files;

		// 入れ物
		var output = [];
		// ファイルの属性情報取得
		for(var i = 0, f; f = files[i]; i++) {
			output.push(
				'<li><strong>',
				escape(f.name),
				'</strong> (',
				f.type || 'n/a'
				, ') - ',
				f.size,
				'bytes, last modified: ',
				f.lastModifiedDate.toLocaleDateString(),
				'</li>'
			);
		}
		// ファイルの属性情報表示
		// joinで要素を連結
		document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
	}

	// ファイルが選択されたらイベントハンドラhandleFileSelect関数を実行
	function change() {
		var filesInput = document.getElementById('files');
		filesInput.addEventListener('change', handleFileSelect, false);

	}
})();

FileReader API

参考）javascripture.com

Constructors

Fileオブジェクトを取得したら、FileReaderオブジェクトをインスタンス化して、コンテンツをメモリに読み取ることができます。


	<input id="file" type="file"><br>
	<img id="output">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			var input = e.target;

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.addEventListener('load', function() {
				var dataURL = reader.result;
				var output = document.getElementById('output');
				output.src = dataURL;
			});
			reader.readAsDataURL(input.files[0]);
		};

		function change() {
			var file = document.getElementById('file');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Properties: error


	<input id="input2" type="file"><br>
	<div id="output2"></div>

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			var input = e.target;

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.addEventListener('loadstart', function() {
				reader.abort();
			});
			reader.addEventListener('loadend', function() {
				var output = document.getElementById('output2');
				output.innerHTML = reader.error.message;
			});
			reader.readAsDataURL(input.files[0]);
		};

		function change() {
			var file = document.getElementById('input2');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Properties: readyState


	<input id="input3" type="file"><br>
	<div id="output3"></div>
	<div id="output3-2"></div>
	<div id="output3-3"></div>

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);
		var stateNames = {};
		stateNames[FileReader.EMPTY] = 'EMPTY';
		stateNames[FileReader.LOADING] = 'LOADING';
		stateNames[FileReader.DONE] = 'DONE';

		function openFile(e) {
			var input = e.target;

			var reader = new FileReader();
			reader.addEventListener('load', function() {
				document.getElementById('output3').innerHTML = 'After load: ' + stateNames[reader.readyState];
			}, false);

			document.getElementById('output3-2').innerHTML = 'Before read: ' + stateNames[reader.readyState];
			reader.readAsDataURL(input.files[0]);
			document.getElementById('output3-3').innerHTML = 'Loading: ' + stateNames[reader.readyState];
		}

		function change() {
			var file = document.getElementById('input3');
			file.addEventListener('change', openFile, false);
		}

	})();

Instance Properties: result


	<input id="input4" type="file"><br>
	<img id="output4">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			var input = e.target;

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.addEventListener('load', function() {
				var dataURL = reader.result;
				var output = document.getElementById('output4');
				output.src = dataURL;
			});
			reader.readAsDataURL(input.files[0]);
		};

		function change() {
			var file = document.getElementById('input4');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Properties: readAsArrayBuffer

	<input id="input5" type="file">
	<div id="output5"></div>

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			var input = e.target;

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.addEventListener('load', function() {
				var arrayBuffer = reader.result;
				document.getElementById('output5').innerHTML = arrayBuffer.byteLength;
			});
			reader.readAsArrayBuffer(input.files[0]);
		};

		function change() {
			var file = document.getElementById('input5');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Properties: readAsDataURL


	<input id="input6" type="file"><br>
	<img id="output6">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			var input = e.target;

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.addEventListener('load', function() {
				var dataURL = reader.result;
				document.getElementById('output6').src = dataURL;
			});
			reader.readAsDataURL(input.files[0]);
		};

		function change() {
			var file = document.getElementById('input6');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Properties: readAsText

	<input id="input7" type="file">
	<div id="output7"></div>

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			var input = e.target;

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.addEventListener('load', function() {
				var text = reader.result;
				document.getElementById('output7').innerHTML = text.substring(0, 200);
			});
			reader.readAsDataURL(input.files[0]);
		};

		function change() {
			var file = document.getElementById('input7');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Event: onloadstart / loadstart

	<input id="input8" type="file">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			console.log('entering openFile()');
			var input = e.target;

			function printEventType(e) {
	      console.log('got event: ' + e.type);
  	  };

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.onloadstart = printEventType;
			reader.onprogress = printEventType;
			reader.onload = printEventType;
			reader.onloadend = printEventType;

			console.log('starting read');
			reader.readAsDataURL(input.files[0]);
			console.log('leaving openFile()');
		};

		function change() {
			var file = document.getElementById('input8');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Event: onprogress / progress

	<input id="input9" type="file">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			console.log('entering openFile()');
			var input = e.target;

			function printEventType(e) {
	      console.log('got event: ' + e.type);
  	  };

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.onloadstart = printEventType;
			reader.onprogress = printEventType;
			reader.onload = printEventType;
			reader.onloadend = printEventType;

			console.log('starting read');
			reader.readAsDataURL(input.files[0]);
			console.log('leaving openFile()');
		};

		function change() {
			var file = document.getElementById('input9');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Event: onload / load

	<input id="input10" type="file">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			console.log('entering openFile()');
			var input = e.target;

			function printEventType(e) {
	      console.log('got event: ' + e.type);
  	  };

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.onloadstart = printEventType;
			reader.onprogress = printEventType;
			reader.onload = printEventType;
			reader.onloadend = printEventType;

			console.log('starting read');
			reader.readAsDataURL(input.files[0]);
			console.log('leaving openFile()');
		};

		function change() {
			var file = document.getElementById('input10');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Event: onabort / abort // onerror / error

	<input id="input11" type="file">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			console.log('entering openFile()');
			var input = e.target;

			function printEventType(e) {
	      console.log('got event: ' + e.type);
				if (event.type === 'loadstart') {
					reader.abort();
				}
  	  };

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.onloadstart = printEventType;
			reader.onprogress = printEventType;
			reader.onload = printEventType;
			reader.onloadend = printEventType;

			console.log('starting read');
			reader.readAsDataURL(input.files[0]);
			console.log('leaving openFile()');
		};

		function change() {
			var file = document.getElementById('input11');
			file.addEventListener('change', openFile, false);
		}
	})();

Instance Event: onloadend / loadend

	<input id="input12" type="file">

	;(function() {
		document.addEventListener('DOMContentLoaded', function() {
			change();
		}, false);

		function openFile(e) {
			console.log('entering openFile()');
			var input = e.target;

			function printEventType(e) {
	      console.log('got event: ' + e.type);
  	  };

			// FileReaderオブジェクトをインスタンス化
			var reader = new FileReader();
			reader.onloadstart = printEventType;
			reader.onprogress = printEventType;
			reader.onload = printEventType;
			reader.onloadend = printEventType;

			console.log('starting read');
			reader.readAsDataURL(input.files[0]);
			console.log('leaving openFile()');
		};

		function change() {
			var file = document.getElementById('input12');
			file.addEventListener('change', openFile, false);
		}
	})();

FileReaderのプロパティー

readyState
以下に示す状態
result
ファイルの内容を読み込んだメソッドに合わせた型で表す
error
ファイルの読み込みで発生したエラーに関するDOMErrorオブジェクト

FileReader定数

EMPTY
FileReaderオブジェクトが生成されて、まだデータを読み込んでいない状態
LOADING
ファイルのデータを読み込んでいる状態
DONE
ファイルのデータをメモリ上にロードし終わったか、途中でエラーが発生した状態

FileReaderのメソッド

readAsArrayBuffer()
データをArrayBufferとして読み込む
readAsText()
データをテキストとして読み込む
readAsDataURL()
データをDataURLとして読み込む
abort()
データの読み込みを中断する

FileReaderのイベントハンドラ

onloadstart
読込が完了したときに呼ばれる
onprogress
blobを読み込んでいるときに呼ばれる
onload
読込が正常に終了したときに呼ばれる
onabort
読込が中断されたときに呼ばれる
onerror
読込が失敗したときに呼ばれる
onloadend
成功か失敗かに関わらず、読込が終了したときに呼ばれる。