普通にhtmlでtype=”file”を指定しただけだと、ファイルをひとつずつ選択する感じになるんですが、これを複数選択に対応しようとすると、swf(flash)を使ったりとかしないといけなかったんですが、html5対応なブラウザだと割りと簡単に対応可能だったのでメモ。

以下のようなhtmlを書いてみました。

<form action="/uploads" enctype="multipart/form-data">
  <input type="file" name="file" multiple="multiple" accept="image/*">
</form>

multiple

追加したのは、

multiple="multiple"

の部分。
multiple指定で、画像選択時に複数選択が可能に。
これだけで、対応ブラウザであれば複数のファイルを同時に選択できるようになります。

accept

さらに

accept="image/*"

っての追加すると、画像ファイルだけみたいな指定も可能。
“image/jpeg”にすれば、jpgのみ。*はワイルドカード。

// 画像ファイル
accept="image/*"

// 音ファイル
accept="audio/*"

// 映像ファイル
accept="video/*"

みたいな感じで、選択できるファイルを指定できます。