361

<input type="file" ...>HTML でファイル アップロードを実装するのはかなり簡単ですが、タグに追加できる「accept」属性があることに気付きました。

この属性は、ファイルのアップロードを画像などに制限する方法として役立ちますか? それを使用する最良の方法は何ですか？

または、できればファイルダイアログで、htmlファイル入力タグのファイルタイプを制限する方法はありますか?

4

8 に答える 8

461

このaccept属性は非常に便利です。現在のinput. 通常はユーザーが上書きできますが、デフォルトでユーザーの結果を絞り込むのに役立ちます。そのため、何百もの異なるファイル タイプをふるいにかけることなく、探しているものを正確に取得できます。

使用法

注:これらの例は現在の仕様に基づいて記述されており、実際にはすべての (または任意の) ブラウザーで機能するとは限りません。仕様も将来変更される可能性があり、これらの例が壊れる可能性があります。

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 仕様から ( source )

このaccept属性を指定して、ユーザー エージェントにどのファイル タイプが受け入れられるかのヒントを提供することができます。

指定する場合、属性 はカンマ区切りのトークンのセットで構成する必要があります。各 トークンは、大文字と小文字を区別しない ASCII で、次のいずれかに一致する必要があります。

文字列audio/*

  • サウンド ファイルが受け入れられることを示します。

文字列video/*

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

文字列image/*

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

パラメータのない有効な MIME タイプ

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

最初の文字が U+002E FULL STOP 文字 (.) である文字列

  • 指定されたファイル拡張子を持つファイルが受け入れられることを示します。
于 2012-05-08T17:33:56.663 に答える
100

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

でサポートされています

  • クロム 16 +
  • サファリ6+
  • Firefox 9 +
  • IE10+
  • オペラ 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
于 2013-02-12T18:52:27.277 に答える
35

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

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

于 2008-10-08T04:02:02.360 に答える
28

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

于 2010-11-16T18:11:48.627 に答える
12

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

于 2011-11-10T02:05:19.247 に答える
6

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

于 2008-10-08T06:06:24.187 に答える
0

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

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

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

于 2014-08-13T16:46:17.793 に答える