menu
ホーム > HTML > html accept 属性「アップロードするファイル種類を指定」

html accept 属性「アップロードするファイル種類を指定」

HTML4 HTML5

accept属性

書式
<input type="file" accept="MIMEタイプや拡張子">

サンプル
<input type="file" accept="text/html">
<input type="file" accept="image/*">
<input type="file" accept=".png,.jpg,.gif/html">

accept属性は、<input>タグ(<input>要素)の type属性 が file の場合、サーバーが受信するファイルの種類を MIMEタイプ で指定います。サーバーで受け入れ態勢の整っているファイルを指定することが出来ます。

HTML accept 属性(attribute)

accept属性

属性タグ(要素)値について
accept<input>
<form> *HTML5削除
MIMEタイプや拡張子
サーバーが受信可能な型を指定します。MIMEタイプ、拡張子、ファイル形式など。
書式
<input type="file" accept="">
値の例
text/plain
text/html
text/css
text/javascript
image/gif
image/png
image/jpeg
image/bmp
image/webp
audio/midi
audio/mpeg
audio/webm
audio/ogg
audio/wav
application/octet-stream
application/pkcs12
application/vnd.mspowerpoint
application/xhtml+xml
application/xml
application/pdf
video/webm
video/ogg

HTML5form要素で使用できなくなりました。拡張子の指定が可能になりました。

accept属性 inputタグ(input要素)の type属性 が file の場合にのみ指定できる属性です。 input要素 の固有属性になります。input要素 でファイルを選択する場合に、サーバーにアップするファイルの種類を指定します。指定の値は MIMEタイプ(一部、全部)、拡張子 となります。例えば、accept="image/png" と指定るすとPNG画像がサーバーへ送信するファイルの対象となります。ブラウザで input要素 のボタンをクリックしてファイルを選択するダイアログボックスが開くと、accept属性 で指定した種類のファイルのみ表示されるようになります。

MIMEタイプを複数指定する場合は、「, (カンマ)」で区切って accept="image/png, image/jpg" のように記述します。

HTML5では、拡張子でもファイルの種類を指定することが可能です。

accept属性 によって選択されたファイルは、そのMIMEタイプや拡張子で指定された種類のファイルであることを保証するものではありません。ファイルの検証はサーバー上で行う必要があります。

サポート

ChromeVer8.0~FirefoxVer4.0~
SafariVer6.0~OperaVer15.0~
Internet ExplorerVer10.0~HTMLVer3.0~

ファイルのMIMEタイプや拡張子

MIMEタイプはファイルの種類を示す情報で、「タイプ名/サブタイプ名」の形式で記述されます。Webブラウザ(クライアント)とWebサーバー間では、このMIMEタイプをファイル情報としてやり取りしています。

MIMEタイプ一覧

ファイル形式MIMEタイプ拡張子
テキスト(text)
テキストデータで、なんらかの文書ファイルです。人間の可読性があります。
text/plain.txtプレーンテキスト
text/html.html .htmHTML文書
text/xml.xmlXML文書
application/xhtml+xml.xhmlXHTML文書
text/css.cssスタイルシート
text/javascript.jsJavaScript
application/javascript.jsJavaScript
イメージ(image)
画像データです。GIFアニメーションを含みます。
image/gif.gifGIF画像
image/png.pngPNG画像
image/jpeg.jpg .jpegJPEG画像
image/bmp.bmpBMP画像
image/webp.webpWebP画像
音声ファイルデータです。
audio/midi.midMIDIオーディオデータ
audio/mpeg.mp1 .mp2 .mp3 .mpg .mpegMPEGオーディオデータ
audio/mp4.mp4 .m4aMP4オーディオデータ
audio/webm.webmWEBMオーディオデータ
audio/ogg.ogg .ogaOGGオーディオデータ
audio/wav.wavWABオーディオデータ
ビデオ(video)
動画ファイルデータです。
video/webm.webmWEBM動画データ
video/ogg.ogvOGG動画データ
バイナリファイルデータです。
application/zip.zipZIPアーカイブファイル
application/octet-stream.arcアーカイブ文書ファイル
application/vnd.ms-excel.xlsMicrosoft Excel
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.xlsxMicrosoft Excel
application/msword.docMicrosoft Word
application/vnd.openxmlformats-officedocument.wordprocessingml.document.docxMicrosoft Word
application/pdf.pdfPDFファイル

サンプルコード

– サンプル Click Here ! –

  • html tag
  • ブラウザ表示
  • html code

タグ(=記事関連ワード)

タグ: ,

日付

投稿日:2018年7月19日
最終更新日:2018年11月09日

関連記事

このカテゴリの他のページ

この記事へのコメント

トラックバックurl

https://wepicks.net/htmlattb-accept/trackback/

page top