へんな柳生

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に入れると画像が見られるというもの。画像はローカルで処理しているから、プレビューしただけならまだサーバーには送られていない状態です。

実際にやったのが下記の例。
“File APIの画像プレビューをちゃんと理解する” の続きを読む