accept属性

input要素のaccept属性は、サーバーが受け入れるファイルの種類を指定する属性。

ブラウザ対応

構文

<input type="file" accept="ファイルの種類">

ファイルの種類

audio/*
オーディオファイル全般。
video/*
動画ファイル全般。
image/*
画像ファイル全般。
MIMEタイプ
MIMEタイプで指定することもできる。
よく使うMIMEタイプの一例
  • text/html:HTML
  • text/xml:XML
  • text/css:スタイルシート(CSS)
  • text/plain:テキスト
  • text/csv:CSV
  • image/png:PNG
  • image/jpeg:JPEG
  • image/gif:GIF
  • audio/mpeg:MP3
  • video/mpeg:MPEG
  • video/mp4:MP4
  • application/pdf:PDF
  • application/x-shockwave-flash:Flash

カンマ,区切りで複数の値を指定することもできる。

accept属性に対応しているinput要素のタイプ(type属性値)

サンプルコード

オーディオファイル全般

<input type="file" accept="audio/*">

動画ファイル全般

<input type="file" accept="video/*">

画像ファイル全般

<input type="file" accept="image/*">

MIMEタイプ

テキストファイル
<input type="file" accept="text/plain">
3つの形式の画像ファイル

PNG、JPEG、GIFの形式の画像ファイル。

<input type="file" accept="image/png,image/jpeg,image/gif">
CSVファイル
<input type="file" accept="text/csv">
PDFファイル
<input type="file" accept="application/pdf">

サンプル

HTMLソースコード

<p>
	<label>
		画像ファイル全般:
		<input type="file" name="sampleInput" accept="image/*">
	</label>
</p>
<p>
	<label>
		動画ファイル全般:
		<input type="file" name="sampleInput" accept="video/*">
	</label>
</p>
<p>
	<label>
		オーディオファイル全般:
		<input type="file" name="sampleInput" accept="audio/*">
	</label>
</p>
<p>
	<label>
		テキストファイルとCSVファイル:
		<input type="file" name="sampleInput" accept="text/plain,text/csv">
	</label>
</p>

実際の表示