ひとつのアップロード部品で複数のファイルをアップロードする方法

なんだか挑発的なタイトルですが、どんながんばってもひとつのアップロード部品(<input type=”file” />)では、ひとつのファイルしかアップロードすることができません。

前のプロジェクトで同じような要件があって調べたこともあったのですが、結局ずらりとファイルアップロード部品を並べて、その醜さにゲンナリした記憶があるのでよく覚えています。

ただし、ひとつにすることは無理ですが、ひとつに見せかけることならできるようです。

以下の記事では、DOMを使ってあたかもひとつの部品で実現しているように見せるというテクニックを紹介しています。こういうのってユーザビリティ的にとても重要ですよね。

Upload multiple files with a single file element – StickBlog

… … Using the DOM, it’s actually a relatively simple matter to conceal a file element once a file has been chosen, and add a new (empty) one in its place. And to keep doing so, as many times as you like. It all happens so quickly, that it appears that there’s only one input element.

ここでダウンロードできるスクリプトファイルmultifile.jsを使えば、たったの5ステップで簡単に実現できます。このmultifile.jsには丁寧な導入手順とコメントがついているので誰でも設置できますし、似たようなコードを書くこともできると思います。

最近よく見るCSSのTIPS的なウェブサイトもそうですが、こういう小ネタをたくさん溜めておくと、比較的簡単にクールでユーザフレンドリーなウェブサイトが作れそうです。

コメント

コメントする

目次