ファイルをブラウザにドラッグ&ドロップしてファイル情報を取得するサンプルです。
動きはシンプルなので「だから?」と感じられるかもしれませんが、、
通常ブラウザに画像をドロップすると、ブラウザがそのまま画像を表示します。してしまいます。
なので、CSS もかけられないし画像の操作もできません。それができちゃうというお話ですよ!


まずは試作をご覧下さい。

試作へ

「ここに画像かテキストファイルをドロップしてください。」エリアに画像をドロップします。
複数ファイルを選択してもよいです。

画像であればサムネイルを表示します。ね、HTML の中に取り込めて、CSS も使えてる!
テキストであれば内容を表示します。

これでファイル情報が取得できていることがわかると思います。
でも、「それって実際何に使うの?」と私自身もつまらなかったのでドロップしたファイルをサーバにアップロードする試作も作りました。
これなら応用できる予感〜。

試作2へ

見た目も動きも先の試作と同じですが、ファイルはサーバにアップロードされています。
サムネイルにアップされたファイルへのリンクを付けていますのでアップされたことをご確認ください。

なお、JavaScript ではファイルをサーバに送るところまでを行っています。
サーバで送られたファイルは PHP で保存しています。あしからず。
※サーバにファイルが溜ると困るので 1時間ほどでファイルは削除してます。

以下、説明はアップロード無しの方です。

<処理手順>
1. API が使えるかチェック
→使える場合はアクションを設定
ブラウザが実装している処理を止める設定もします。
2. event.dataTransfer.files でファイル情報を取得。チェックなどを行う。
3. 画像の場合は FileReader で readAsDataURL を取得。
テキストの場合は FileReader で readAsText を取得。

<参考>
▼ MDN Using files from web applications
https://developer.mozilla.org/en/Using_files_from_web_applications

▼ HTML5 Rocks FileSystem API について知る
http://www.html5rocks.com/ja/tutorials/file/filesystem/

▼ HTML5.JP File API
http://www.html5.jp/tutorial/apicheck/FileAPI.html

▼ W3C File API
http://dev.w3.org/2006/webapi/FileAPI/