HTML5で表現力が豊かになり、APIが多数追加されたとあってもそれを活かすコードを書かなければ従来のWebと何ら変わりません。特にフォーム周りは多数の機能が追加されています。これらを使うこなすことでユーザビリティの高いフォーム機能が実現します。
今回はファイルアップロードに注目して役立つライブラリを紹介します。
JeremyFagis/dropify: Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify
ファイルをローカルコンピュータからドラッグ&ドロップしてアップロードできます。画像の場合、サムネイルを表示します。マウスオーバーするとアニメーションがかかったりするのでユーザがファイルをドロップする場所を迷わないで済みます。
FineUploader/fine-uploader: Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.
複数のファイルアップロードが可能で、画像のプレビューも備わっています。アップロード時にはプログレスバーが表示されます。さらにAmazon S3やAzureへのアップロードも可能です。
ファイルは分割アップロードされ、一旦停止したりリジュームも可能です。
taylor/html5uploader: clone of http://code.google.com/p/html5uploader/
特定のDOMに対してファイルをドラッグ&ドロップでアップロードできるようになります。一旦リストにファイルを蓄積することも、すぐにファイルをアップロード開始することも可能です。
taylor/html5uploader: clone of http://code.google.com/p/html5uploader/
mihaild/jquery-html5-upload: It is a simple plugin for jQuery, which helps you to upload multiple files and to show progress of uploading.
jQueryに対応した複数ファイルのアップロードライブラリです。イベントも取れますし、途中のステータスも取得できます。jQueryなのでhifiveとの相性もいいはずです。
Rovak/InlineAttachment: Easily paste and upload files/images in plain textareas
テキストエリアにファイルをドラッグ&ドロップできます。そしてファイルをAjaxでアップロードすれば、GitHubやはてなブログなどで実現されている機能相当になります。
Rovak/InlineAttachment: Easily paste and upload files/images in plain textareas
flowjs/flow.js: A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.
HTML5のFile APIを使ってファイルを分割し、アップロードの再開、一時停止ができるようになります。サーバ側では送られてきた分割ファイルを後で結合する必要があるのでクライアント側だけでは完結しません。
enyo/dropzone: Dropzone is an easy to use drag’n’drop library. It supports image previews and shows nice progress bars.
指定されたDOMに画像ファイルをアップロードすれば、サムネイルの表示と良い感じのプログレスバーが表示されます。サーバ側は特に普通のファイルとして扱えますので、どんなシステムでも利用できます。
blueimp/jQuery-File-Upload: File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
ファイルを複数選択し、それらのサムネイルを確認した上でアップロードが開始できるようになっています。個別にアップロードもできます。大量の画像をアップロードする際（さらに一旦確認が必要な場合）に便利なUIです。こちらもアップロードの一時停止、再開に対応しています。
今回紹介したライブラリではHTML5のファイルのドラッグ&ドロップ、複数ファイルの指定、File APIによるファイル分割などが使われています。従来のフォームでは難しかったこういった機能もHTML5によって容易に実現できるようになっています。
ライブラリであればシステムへの導入も容易でしょう。ぜひご利用ください。
