jQuery ファイルドラッグアンドドロップアップロード

1.最近クライアントからの要望で、ファイルのアップロードをドラッグアンドドロップで行えるような、リッチなクライアントを作成したいというものがあった。

2.そこで、いろいろ調べた結果、jqueryで実装できる、「jQuery File Upload」という、UIを使用することになった。

ファイルのダウンロード及びデモサイトは、http://blueimp.github.io/jQuery-File-Upload/で、確認できる。

【設置の方法】
ダウンロードしたファイルを解凍し、サーバーへコピーするだけ。
コピーしたディレクトリをURLで指定すれば、デモサイトと同様の画面が開く。

 

【使い方】
デスクトップ等にあるアップロードしたいファイルをブラウザの画面に、ドラッグアンドドロップし、
startボタンを押すだけ。

 
【サーバーサイドの処理の実装】
こちらは、使用している環境にもよるが、通常のファイルのアップロードと同様な実装の仕方で、ファイルをサーバー上でコピーすることができる。
–参考サイト
https://github.com/blueimp/jQuery-File-Upload/wiki

のServer-side（ページ中盤以降）
に、PHP、PHYTON、Ruby、JAVA、ASP.net等での実装の仕方のサンプルが、豊富に用意されている。

【まとめ】
今回は、紹介までですが、是非、一度お試しください。