File APIの画像プレビューをちゃんと理解する

December 15th, 2012

File APIが自分的にややこしかったので、画像プレビューに限定して整理しますね。

File APIを使わなくてもできること

以下の項目は普通に取得できます。

  • 更新日時
  • ファイル名
  • データサイズ(バイト数)
  • MIMEタイプ(ファイルの種類)
<!-- ファイル入力のためのinput -->
<input id="inputNode" type="file">

<!-- ここからデータ取得のスクリプト -->
<script src="http://code.jquery.com/jquery.min.js">// jQueryの読み込み</script>
<script>
$( '#inputNode' ).change( function () { // 入力をフックにデータ取得を実行
	// 選択されたファイルはinputノードの"files"配列に格納される
	// ↓任意の変数に選択されたファイルのオブジェクトを格納
	var selectedFile = this.files[0];

	// あとはこのオブジェクトから各データを呼び出せばOK

	// 更新日時:lastModifiedDate
	// 出力例:Fri Dec 14 2012 23:38:54 GMT+0900 (東京 (標準時))
	console.debug( selectedFile.lastModifiedDate );

	// ファイル名:name
	// 出力例:"omoide.jpg"
	console.debug( selectedFile.name );

	// データサイズ:size
	// 出力例:103437
	console.debug( selectedFile.size );

	// MIMEタイプ:type
	// 出力例:"image/jpeg"
	console.debug( selectedFile.type );
} );
</script>

File APIを使った画像プレビューのフロー

  1. FileReaderオブジェクトを生成

  2. FileReaderで画像の読み込み完了を検知

  3. FileReaderで画像データをData URIスキーム化

  4. 取得したData URIスキームをimgタグにセットしてプレビュー

FileReaderオブジェクトがFile APIの心臓。これを生成するとFile APIのいろいろな機能を使うことができます。

Data URIスキームってゆうのは画像を文字列に置き換える技術で、これをそのままimgタグのsrcに入れると画像が見られるというもの。画像はローカルで処理しているから、プレビューしただけならまだサーバーには送られていない状態です。

実際にやったのが下記の例。
[続きを読む]