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

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

HTML4 HTML5

目次
sec.1
sec.2
sec.3
sec.4

HTML accept 属性（attribute）
サポート
ファイルのMIMEタイプや拡張子
サンプルコード

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属性

<!-- 書式 -->
<input type="file" accept="MIMEタイプや拡張子">
<!-- サンプル -->
<input type="file" accept="text/html">
<input type="file" accept="image/*">
<input type="file" accept=".png,.jpg,.gif">

属性	タグ（要素）	値について
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

<form action="accept.php" method="post">

■PNG画像：<br/>
<input type="file" name="imagePng" accept="image/png" /><br/><br/>

■画像全般：<br/>
<input type="file" name="imageAll" accept="image/*" /><br/><br/>

■HTML文書：<br/>
<input type="file" name="textHtmlXml" accept="text/html,text/xml" /><br/><br/>

■音声mp4：<br/>
<input type="file" name="audioMp4" accept="audio/mp4 " /><br/><br/>

■エクセルファイル：<br/>
<input type="file" name="appWord" accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /><br/><br/>

<input type="submit">

</form>

■PNG画像：<br/>

■画像全般：<br/>

■HTML文書：<br/>

■音声mp4：<br/>

■エクセルファイル：<br/>

</form>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>HTML | WEPICKS!</title>
</head>
<body>

<!-- // ============ html tag ============ -->

<form action="accept.php" method="post">

■PNG画像：<br/>
<input type="file" name="imagePng" accept="image/png" /><br/><br/>

■画像全般：<br/>
<input type="file" name="imageAll" accept="image/*" /><br/><br/>

■HTML文書：<br/>
<input type="file" name="textHtmlXml" accept="text/html,text/xml" /><br/><br/>

■音声mp4：<br/>
<input type="file" name="audioMp4" accept="audio/mp4 " /><br/><br/>

■エクセルファイル：<br/>
<input type="file" name="appWord" accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /><br/><br/>

<input type="submit">

</form>

<!-- ============ html tag ============ // -->

</body>
</html>