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/*

• 画像ファイルが受け入れられることを示します。

パラメータなしで有効なMIMEタイプ

• 指定されたタイプのファイルが受け入れられることを示します。

最初の文字がU + 002Eフルストップ文字（。）である文字列

• 指定されたファイル拡張子を持つファイルが受け入れられることを示します。

はい、それをサポートするブラウザでは非常に便利ですが、「制限」は、ユーザーが不要なものをアップロードしないようにする方法ではなく、ユーザーにとって便利なため（無関係なファイルに圧倒されないようにするため）です。アップロード。

それはでサポートされています

• Chrome 16以降
• Safari 6以降
• Firefox 9以降
• IE 10以降
• Opera 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/jpegMIMEタイプのFirefoxを使用すると、.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

Accept属性はRFC 1867で導入され、ファイル選択コントロールのMIMEタイプに基づいてファイルタイプフィルタリングを有効にすることを目的としています。しかし、2008年の時点では、すべてではないにしても、ほとんどのブラウザーはこの属性を使用していません。クライアント側のスクリプトを使用すると、正しいタイプ（拡張子）のデータを送信するために、一種の拡張子ベースの検証を行うことができます。

高度なファイルアップロードのための他のソリューションでは、SWFUploadなどのFlashムービーまたはJUploadなどのJavaアプレットが必要です。

Chromeでサポートされています。検証に使用することは想定されていませんが、OSのヒントとして使用されます。accept="image/jpeg"ファイルのアップロードに属性がある場合、OSは推奨されたタイプのファイルのみを表示できます。

数年経ちましたが、Chromeは少なくともこの属性を利用しています。この属性は、ユーザーにとって不要なファイルを除外し、エクスペリエンスをスムーズにするため、使いやすさの観点から非常に役立ちます。ただし、ユーザーはタイプから「すべてのファイル」を選択できる（またはフィルターをバイパスする）ことができるため、常に実際に使用されているファイルを検証する必要があります。サーバーで使用している場合は、使用する前にそこで検証してください。ユーザーは常にクライアント側のスクリプトをバイパスできます。

ブラウザーがこの属性を使用する場合、それはユーザーのヘルプとしてのみ使用されるため、サーバーによって拒否されたことを確認するためだけにマルチメガバイトのファイルをアップロードしません... タグ
についても同じです<input type="hidden" name="MAX_FILE_SIZE" value="100000">：ブラウザーがそれを使用する場合、ファイルは送信しませんが、エラーが発生しUPLOAD_ERR_FORM_SIZE、PHP で（2）エラーが発生します（他の言語での処理方法が不明です）。
これらはユーザーにとって役立つことに注意してください。もちろん、サーバーは常にファイルの種類とサイズを確認する必要があります。クライアント側でこれらの値を改ざんするのは簡単です。

2008年には、モバイルOSがないためこれは重要ではありませんでしたが、今では非常に重要なことです。

受け入れられるMIMEタイプを設定すると、たとえばAndroidユーザーには、ファイル入力が受け入れるMIMEのコンテンツを提供できるアプリのシステムダイアログが表示されます。これは、モバイルデバイスのファイルエクスプローラーでファイルをナビゲートするのが遅く、多くの場合ストレスが多いため、すばらしいことです。 。

重要なことの1つは、一部のモバイルブラウザー（Chrome 36のAndroidバージョンおよびChrome Beta 37に基づく）は、拡張子および複数のMIMEタイプに対するアプリフィルタリングをサポートしていないことです。