ファイル入力の 'accept'属性 - 便利ですか？
HTMLでファイルのアップロードを実装するのはかなり簡単ですが、<input type="file" ...>タグに追加できる「accept」属性があることに気付きました。
この属性はファイルのアップロードを画像などに制限する方法として役立ちますか？それを使用するための最良の方法は何ですか？
あるいは、HTMLファイル入力タグに対して、できればファイルダイアログでファイルタイプを制限する方法はありますか。
accept属性は非常に便利です。現在のinputで許可されているファイルのみを表示することはブラウザにとってのヒントです。通常はユーザーによって上書きされる可能性がありますが、デフォルトではユーザーの結果を絞り込むことができるため、100種類のファイルタイプを調べなくても、探しているものを正確に取得できます。
使用法
注： これらの例は現在の仕様に基づいて書かれており、実際にはすべての（または任意の）ブラウザで動作するわけではありません。仕様も将来変更される可能性があり、これはこれらの例を壊す可能性があります。
h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>
<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>
<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>
<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>
<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>HTML仕様書から（ ソース ）
accept属性は、どのファイルタイプが受け入れられるかのヒントをユーザーエージェントに提供するために指定されるかもしれません。指定した場合、属性は、 コンマ区切りトークン のセットで構成され、各トークンは ASCIIでなければなりません。大文字と小文字を区別しない で、次のいずれかに一致
文字列
audio/*
- サウンドファイルが受け入れられることを示します。
文字列
video/*
- ビデオファイルが受け入れられることを示します。
文字列
image/*
- 画像ファイルが受け入れられることを示します。
A valid MIME type with no parameters
- 指定された種類のファイルが受け入れられることを示します。
最初の文字がU + 002E完全停止文字（。）であるストリング
- 指定されたファイル拡張子を持つファイルが受け入れられることを示します。
はい、それをサポートしているブラウザでは非常に便利ですが、「制限する」ことは、不要なものをアップロードしないようにするのではなく、ユーザにとって便利なためです。アップロードしています。
でサポートされています
- Chrome 16以降
- Safari 6以降
- Firefox 9以降
- IE 10以降
- オペラ11+
これが あなたがそれと共に使用できるコンテンツタイプのリスト であり、続いて対応するファイル拡張子が続きます（もちろんあなたはどんなファイル拡張子でも使用できます）：
application/envoy evy
application/fractals fif
application/futuresplash spl
application/hta hta
application/internet-property-stream acx
application/mac-binhex40 hqx
application/msword doc
application/msword dot
application/octet-stream *
application/octet-stream bin
application/octet-stream class
application/octet-stream dms
application/octet-stream exe
application/octet-stream lha
application/octet-stream lzh
application/oda oda
application/olescript axs
application/pdf pdf
application/pics-rules prf
application/pkcs10 p10
application/pkix-crl crl
application/postscript ai
application/postscript eps
application/postscript ps
application/rtf rtf
application/set-payment-initiation setpay
application/set-registration-initiation setreg
application/vnd.ms-Excel xla
application/vnd.ms-Excel xlc
application/vnd.ms-Excel xlm
application/vnd.ms-Excel xls
application/vnd.ms-Excel xlt
application/vnd.ms-Excel xlw
application/vnd.ms-Outlook msg
application/vnd.ms-pkicertstore sst
application/vnd.ms-pkiseccat cat
application/vnd.ms-pkistl stl
application/vnd.ms-PowerPoint pot
application/vnd.ms-PowerPoint pps
application/vnd.ms-PowerPoint ppt
application/vnd.ms-project mpp
application/vnd.ms-works wcm
application/vnd.ms-works wdb
application/vnd.ms-works wks
application/vnd.ms-works wps
application/winhlp hlp
application/x-bcpio bcpio
application/x-cdf cdf
application/x-compress z
application/x-compressed tgz
application/x-cpio cpio
application/x-csh csh
application/x-director dcr
application/x-director dir
application/x-director dxr
application/x-dvi dvi
application/x-gtar gtar
application/x-gzip gz
application/x-hdf hdf
application/x-internet-signup ins
application/x-internet-signup isp
application/x-iphone iii
application/x-javascript js
application/x-latex latex
application/x-msaccess mdb
application/x-mscardfile crd
application/x-msclip clp
application/x-msdownload dll
application/x-msmediaview m13
application/x-msmediaview m14
application/x-msmediaview mvb
application/x-msmetafile wmf
application/x-msmoney mny
application/x-mspublisher pub
application/x-msschedule scd
application/x-msterminal trm
application/x-mswrite wri
application/x-netcdf cdf
application/x-netcdf nc
application/x-perfmon pma
application/x-perfmon pmc
application/x-perfmon pml
application/x-perfmon pmr
application/x-perfmon pmw
application/x-pkcs12 p12
application/x-pkcs12 pfx
application/x-pkcs7-certificates p7b
application/x-pkcs7-certificates spc
application/x-pkcs7-certreqresp p7r
application/x-pkcs7-mime p7c
application/x-pkcs7-mime p7m
application/x-pkcs7-signature p7s
application/x-sh sh
application/x-shar shar
application/x-shockwave-flash swf
application/x-stuffit sit
application/x-sv4cpio sv4cpio
application/x-sv4crc sv4crc
application/x-tar tar
application/x-tcl tcl
application/x-tex tex
application/x-texinfo texi
application/x-texinfo texinfo
application/x-troff roff
application/x-troff t
application/x-troff tr
application/x-troff-man man
application/x-troff-me me
application/x-troff-ms ms
application/x-ustar ustar
application/x-wais-source src
application/x-x509-ca-cert cer
application/x-x509-ca-cert crt
application/x-x509-ca-cert der
application/ynd.ms-pkipko pko
application/Zip zip
audio/basic au
audio/basic snd
audio/mid mid
audio/mid rmi
audio/mpeg mp3
audio/x-aiff aif
audio/x-aiff aifc
audio/x-aiff aiff
audio/x-mpegurl m3u
audio/x-pn-realaudio ra
audio/x-pn-realaudio ram
audio/x-wav wav
image/bmp bmp
image/cis-cod cod
image/gif gif
image/ief ief
image/jpeg jpe
image/jpeg jpeg
image/jpeg jpg
image/pipeg jfif
image/svg+xml svg
image/tiff tif
image/tiff tiff
image/x-cmu-raster ras
image/x-cmx cmx
image/x-icon ico
image/x-portable-anymap pnm
image/x-portable-bitmap pbm
image/x-portable-graymap pgm
image/x-portable-pixmap ppm
image/x-rgb rgb
image/x-xbitmap xbm
image/x-xpixmap xpm
image/x-xwindowdump xwd
message/rfc822 mht
message/rfc822 mhtml
message/rfc822 nws
text/css css
text/h323 323
text/html htm
text/html html
text/html stm
text/iuls uls
text/plain bas
text/plain c
text/plain h
text/plain txt
text/richtext rtx
text/scriptlet sct
text/tab-separated-values tsv
text/webviewhtml htt
text/x-component htc
text/x-setext etx
text/x-vcard vcf
video/mpeg mp2
video/mpeg mpa
video/mpeg mpe
video/mpeg mpeg
video/mpeg mpg
video/mpeg mpv2
video/quicktime mov
video/quicktime qt
video/x-la-asf lsf
video/x-la-asf lsx
video/x-ms-asf asf
video/x-ms-asf asr
video/x-ms-asf asx
video/x-msvideo avi
video/x-sgi-movie movie
x-world/x-vrml flr
x-world/x-vrml vrml
x-world/x-vrml wrl
x-world/x-vrml wrz
x-world/x-vrml xaf
x-world/x-vrml xof
2015年に唯一の方法私はそれがChromeとFirefoxの両方で動作するようにしましたはあなたがサポートしたいすべての可能な拡張子を含むものです。
accept=".jpeg, .jpg, .jpe, .jfif, .jif"
FireFoxの問題：image/jpeg mimeタイプを使用すると、.jpgファイルしか表示されません。一般的な.jpegがうまくいかなかったかのように非常に奇妙なことです...
あなたが何をしても、多くの異なる拡張子を持つファイルで試してみてください。たぶんそれはさえOSに依存します...
acceptは大文字と小文字を区別しないと思いますが、すべてのブラウザではそうではないかもしれません。
これが MDNのacceptに関するドキュメント です：
type属性の値がfileの場合、この属性はサーバーが受け入れるファイルの種類を示します。それ以外の場合は無視されます。値は、一意のコンテンツタイプ指定子のカンマ区切りのリストである必要があります。
A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc). A valid MIME type with no extensions. audio/* representing sound files. HTML5 video/* representing video files. HTML5 image/* representing image files. HTML5
Chromeでサポートされています。検証には使用されることは想定されていませんが、OSにヒントを与えるために使用されます。ファイルアップロードにaccept="image/jpeg"属性がある場合、OSは推奨される種類のファイルのみを表示できます。
数年が経ちましたが、Chromeは少なくともこの属性を利用しています。この属性は、ユーザにとって不要なファイルを除外して、ユーザエクスペリエンスをよりスムーズにするため、ユーザビリティの観点から非常に役立ちます。ただし、ユーザーはその種類から「すべてのファイル」を選択（または別の方法でフィルタをバイパス）してもかまいません。したがって、実際に使用されているファイルは常に検証する必要があります。サーバーで使用している場合は、使用する前に確認してください。ユーザーはいつでもクライアントサイドのスクリプトを回避できます。
ブラウザがこの属性を使用している場合、それはユーザーの助けになるだけなので、サーバーによって拒否されたことを確認するためだけにマルチメガバイトのファイルをアップロードすることはありません。<input type="hidden" name="MAX_FILE_SIZE" value="100000">タグについても同じです。ブラウザがファイルを使用した場合、ファイルは送信されませんが、PHPにUPLOAD_ERR_FORM_SIZE（2）エラーが発生するエラーが発生します。他の言語）。
これらはユーザーに役立ちます。もちろん、サーバー側では常にファイルの種類とサイズをチェックする必要があります。クライアント側でこれらの値を変更するのは簡単です。
2008年には、モバイルOSがないためこれは重要ではありませんでしたが、今では非常に重要なことです。
許可されたMIMEタイプを設定すると、たとえばAndroidユーザーに、ファイル入力が許可するMIMEの内容を提供することができるアプリとのシステムダイアログが表示されます。 。
重要なことの1つは、一部のモバイルブラウザ（Android版のChrome 36およびChrome Beta 37に基づく）は、拡張子や複数のMIMEタイプに対するアプリのフィルタリングをサポートしていないことです。