jQuery File UploadはHTML5を使って複数ファイルを選択できるファイルアップローダー。ドラッグアンドドロップにも対応。

[/s2If]

jQuery File UploadはjQuery/JavaScript/HTML5製のオープンソース・ソフトウェア。Webの仕様の中には面倒だと思うものが幾つかあるが、ユーザとして使っている中で感じるのはファイルアップロードに手間がかかりすぎることだ。

アップロード中

ファイルボックスでは一つしかファイルが選べず、ダイアログをいちいち出して選ばないといけない。Flashで解決する手法もあるが、JavaScriptとの組み合わせに問題があったり導入が若干面倒だった。だがそれを解決する素晴らしいライブラリがjQuery File Uploadだ。

jQuery File UploadはHTML5を使っており、Flashに頼らない複数ファイルのアップロードが可能だ。アップロードは自動的に開始し、後から削除することもできる。アップロード中はステータスバーが状況を伝えてくれるのが分かりやすい。

ファイルをドラッグするとアップロードする場所が広がる

さらにドラッグアンドドロップでのファイルアップロードにも対応している。これはGmail風だ。クロスドメインでのファイルアップロードにも対応している。ブラウザはGoogle Chrome7以上、Safari5以上、Firefox3.6以上、Opera10.6以上、IE6以上となっている。

もちろんIE6などでは複数ファイルの選択やドラッグアンドドロップはできないが、全く使えない訳ではないので安心して導入できそうだ。

[s2If !current_user_can(access_s2member_level1)]

MOONGIFTは読者の皆さまのサポートによって運営されています。ぜひプレミアム登録お願いします!月 額500円の他、半年(3,000円)、年間パック(6,000円)もあります。! プレミアムユーザのログインはこちらから

[/s2If]

MOONGIFTはこう見る

Flashに頼らず、コードを見る限り導入も容易ということがないように思える。特に多様なブラウザでドラッグアンドドロップに対応しているのが嬉しい。Webアプリケーションのようにファイルのやり取りが多いサービスでは重宝するのではないだろうか。

ファイルアップロードは手間がかかるためにユーザにいやがられる機能の一つになっている。これまでの操作とは異なるので混乱を生む可能性もあるが、それでも導入するメリットはありそうなライブラリだ。

[/s2If]

via jQuery File Upload - Multiple File Upload Plugin for jQuery | blogfreakz.com

jQuery File Upload Demo

[/s2If]

blueimp/jQuery-File-Upload - GitHub