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タイプや拡張子で指定された種類のファイルであることを保証するものではありません。ファイルの検証はサーバー上で行う必要があります。

サポート

Chrome Ver8.0~ Firefox Ver4.0~
Safari Ver6.0~ Opera Ver15.0~
Internet Explorer Ver10.0~ HTML Ver3.0~

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

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

MIMEタイプ一覧

ファイル形式 MIMEタイプ 拡張子
テキスト(text)
テキストデータで、なんらかの文書ファイルです。人間の可読性があります。
text/plain .txt プレーンテキスト
text/html .html .htm HTML文書
text/xml .xml XML文書
application/xhtml+xml .xhml XHTML文書
text/css .css スタイルシート
text/javascript .js JavaScript
application/javascript .js JavaScript
イメージ(image)
画像データです。GIFアニメーションを含みます。
image/gif .gif GIF画像
image/png .png PNG画像
image/jpeg .jpg .jpeg JPEG画像
image/bmp .bmp BMP画像
image/webp .webp WebP画像
音声ファイルデータです。
audio/midi .mid MIDIオーディオデータ
audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg MPEGオーディオデータ
audio/mp4 .mp4 .m4a MP4オーディオデータ
audio/webm .webm WEBMオーディオデータ
audio/ogg .ogg .oga OGGオーディオデータ
audio/wav .wav WABオーディオデータ
ビデオ(video)
動画ファイルデータです。
video/webm .webm WEBM動画データ
video/ogg .ogv OGG動画データ
バイナリファイルデータです。
application/zip .zip ZIPアーカイブファイル
application/octet-stream .arc アーカイブ文書ファイル
application/vnd.ms-excel .xls Microsoft Excel
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx Microsoft Excel
application/msword .doc Microsoft Word
application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx Microsoft Word
application/pdf .pdf PDFファイル

サンプルコード

– サンプル Click Here ! –

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

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

タグ: ,

日付

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

関連記事

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

この記事へのコメント

トラックバックurl

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

page top