input type=”file”で複数ファイル選択と形式を指定(html5)

普通に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/*"

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

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください