画像のサムネイル表示にも対応したWebブラウザへのD&Dアップロードライブラリ「Dropzone」
Dropzoneはファイルのドラッグ&ドロップによるファイルアップロードを可能にするJavaScriptライブラリです。
Gmailではじめ（恐らく）見て以来、様々な場面で見られるようになったWebブラウザへのファイルのドラッグ&ドロップでのアップロード機能ですが、より手軽に扱えるようにしてくれるライブラリがDropzoneです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-09 10.18.37.1357704789.png)
トップページです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-09 10.19.13.1357704795.png)
ファイルをドロップしました。画像はサムネイルが表示されます。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-09 10.19.40.1357704802.png)
画像をアップロード中。平行して実行されます。
ファイルをドロップすると自動的にアップロードを開始してくれます。ドロップしたりアップロードが完了したりしたタイミングでイベントを実行したり、最大ファイルサイズ指定やサムネイルの表示設定など細かなカスタマイズができるようになっています。
DropzoneはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Dropzoneが便利だと思うのはフォームの入力プロセスとは別でファイルのアップロード処理ができる点です。ファイルをアップロードしながら入力やコンテンツの閲覧が進められるので、悩みの多いAjaxベースのファイルアップロードが容易に実現できます。
対応ブラウザはChrome 7、Firefox 4、IE 10、Opera 12、Safari 5以上となっており、敷居が高いのが若干の欠点かも知れません。他のライブラリや通常のファイルアップロードと絡めつつ使うのが良さそうです。
via Open Source JS Library For Provides Drag’n’drop File Uploads: Dropzone.js | Greepit