HTML
この記事では、ファイル選択で受け付ける種類を指定するinput accept属性の意味と使い方を、基本から説明します。
この記事でわかること
accept属性でファイル選択の候補を案内する方法- 拡張子・MIMEタイプ・複数指定の書き方
acceptだけに頼らずサーバー側でも検証する理由
HyperText Markup Language <input> accept Attribute.
<input accept>
input要素の accept属性は、ファイル選択画面で選べるファイルの種類を指定する属性です。
accept属性は選択時の目安を示すもので、サーバー側の検証の代わりにはなりません。アップロード後は、サーバー側でもファイル形式や内容を確認してください。
Syntax
<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
- application/x-shockwave-flash
- Flash
- カンマ「,」区切りで複数の値を指定することもできます。
Sample
- オーディオファイル全般
-
<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">