ラボ > HTML:form関連

html5 input type=fileのaccept属性で対象指定

input(type=file)タグで選択可能なファイルの種類を指定する

作成日:2017-12-18, 更新日:2018-02-15

基本

<input type="file" accept="ファイルの種類" />

accept属で使える値たち

▼基本

audio/*
オーディオファイル全般
video/*
動画ファイル全般
image/*
画像ファイル全般

▼MIMEタイプを直接指定 - 複数指定するときは「,(カンマ)」区切りにする。

画像系
・image/png - png画像
・image/x-png - png画像
・image/jpeg - jpg画像
・image/gif - gif画像
・image/bmp - bmp画像(ビットマップ)
・image/x-MS-bmp - bmp画像(ビットマップ)
・image/x-bmp - bmp画像(ビットマップ)
圧縮ファイル系
・application/x-compress - .z .gz .tgz .taz .tar .arc .arj .lzh .zip
・application/x-gzip - .gz
・application/x-zip-compressed - .zip .lzh
・application/zip - .zip
・text/html - HTML
・text/xml - XML
・text/css - CSS(スタイルシート)
・text/plain - テキスト
・text/csv - csv
・audio/mpeg - MP3
・video/mpeg - MPEG
・video/mp4 - MP4
・application/pdf - PDF

※他にもあると思う。

▼複数指定

<input type="file" accept="image/png,image/jpeg" />

関連項目

PHP formタグからのファイル受け取り

参考

MIMEタイプ一覧