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

なんだか挑発的なタイトルですが、どんながんばってもひとつのアップロード部品(<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的なウェブサイトもそうですが、こういう小ネタをたくさん溜めておくと、比較的簡単にクールでユーザフレンドリーなウェブサイトが作れそうです。

気に入ったらシェアお願いします!

この記事を書いた人

こんにちは!カノといいます👓
インターネットやテクノロジー、ビジネスモデルや歴史(世界史・日本史)、美術などが好きです。メガネのせいか真面目っぽく見えるらしいですが、基本的には昔からいい加減な性格です。
このブログは昔からずっと個人的な日記みたいな感じで書いてきていて、基本的には個人的なログになりますが、興味のあるところだけ読んでいただけるとうれしいです。コメントやTwitterのフォローなどは大歓迎です。

コメント

コメントする

目次