ブラウザで複数ファイルドロップしてPOST

複数ファイルをドロップする方法とそれをPOSTでPHPプログラムへ渡す方法です。
最新のIE、FireFox、Chromeで確認済み。
ソースの抜粋をしておきます。

ドロップされたかを確認するためには、JavaScriptを利用します。
その後POSTで、非同期通信をします。


ドロップを認識させたいアイテムで"drop"イベントを監視できるようにしておきます。
dataTransfer.filesにドロップしたファイルの情報が入るので、これをPOSTするようにします。

XMLHttpRequest() は非同期通信を簡単に行える機能っぽいです。
FormData() はファイル送信に必要なフォームのテンプレートを用意できる機能ですかね。
（ multipart/form-data で送信してくれる ）

FormData にファイル指定コントロールを追加（append）しておきます。
引数1番目にname、2番目にfileオブジェクトを指定します。
ここでは複数ファイルに対応するため、nullになるまでforでまわしていきます。

XMLHttpRequest() で FormData() を送信します。
非同期通信で結果が返ってきたかを確認するには"load"イベントを監視すればよいっぽいです。

PHPではファイルを受け取ると、$_FILES へ連想配列で情報が格納されます。
1次元にはFormData().append したときの name が、
2次元にはそのファイルの詳細。


基本的な動きは出来ているっぽいですね（動けば良し思想）

参考URL
http://www.html5rocks.com/ja/tutorials/file/dndfiles/
http://hakuhin.jp/js/form_data.html


あと、今更ですがブログの配置を少し換えてみたり。