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

file

サンプルコード

オーディオファイル全般

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

動画ファイル全般

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

画像ファイル全般

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

MIMEタイプ

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

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>

実際の表示