accept 属性 - ファイル種類の指定

■ 概要

項  目説  明
記述形式 accept = "MIMEタイプ"
値 の形式 MIMEタイプの 識別子 (ファイルの種類)
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+
適用可能な要素
(種  類)
<input> (固有属性
ただし,type 属性 の値が file のときだけ有効。
継  承 しない

■ 解説

accept 属性 は,

input 要素 で,
type 属性 の指定が type = "file" である場合に,選択可能なファイルの種類MIME タイプ で指定します。

つまり,サーバーが受け取ることのできる ファイルの種類の情報 として,選択可能なファイルの MIME タイプが設定できます。

この accept 属性 を指定しておけば,ファイルを選択するダイアログボックスが開いたときに,特定の種類のファイルだけを表示させる ことができます。


【MIME タイプ について】

Web の世界では,ファイルの種類の情報として,ファイル名の 拡張子 のほかに,もうひとつ MIMEタイプ が使われます。 MIME タイプは タイプ名 / サブタイプ名 の形式の文字列であり,Web サーバーと Webブラウザー間のファイルのやり取りは,この MIME タイプでデータの形式を指定して行います。

MIME タイプには以下のようなものがあります。

ファイル形式 一般的な拡張子 MIMEタイプ
テキスト .txt text/plain
HTML文書 .htm .html text/html
XML文書 .xml text/xml
JavaScript .js text/javascript
VBScript .vbs text/vbscript
CSS .css text/css
GIF画像 .gif image/gif
JPEG画像 .jpg .jpeg image/jpeg
PNG画像 .png image/png
CGIスクリプト .cgi application/x-httpd-cgi
Word文書 .doc application/msword
PDF文書 .pdf application/pdf
AAC音声 .aac audio/aac
MP4音声 .mp4 .m4a audio/mp4
MPEG音声 .mp1 .mp2 .mp3 .mpg .mpeg audio/mpeg
OGG音声 .oga .ogg audio/ogg
WAV音声 .wav audio/wav
WebM音声 .webm audio/webm
MP4ビデオ .mp4 .m4v video/mp4
OGGビデオ .ogv video/ogg
WebMビデオ .webm video/webm

■ 使用例( accept 属性の利用)

たとえば,写真をアップロードするシステム では,画像ファイルのみが選択対象になります。 このような場合, 画像のみアップロードが可能 と指定したくなります。 そのような指定をするのが,この accept 属性 で, たとえば JPEG形式 と PNG形式 の画像ファイルだけをアップロードしてもらいたいような場合は,以下のように指定します。


HTMLソース
HTML
<body> ~ </body>
<input name="imgfile" type="file" accept="image/jpeg, image/png">

ブラウザー 表示例

■ 備考

【参考ページ】