accept とは
- ここで説明する accept とは次の語句からなる HTML 要素の属性です。
- accept
- 読み: アクセプト
意味: 受け入れる
accept 属性の概要
この属性は、 input 要素の file 型で使われる属性です。
input 要素の file 型は File API を呼び出すための要素であり、ファイルを選択する際のファイルの種類を設定するための属性となります。
accept 属性については対応しているブラウザが多いですが、バージョンによっては未対応のものもあります。 また、File APIについても実装されているものが多いですが、未対応のものもあります。
accept 属性を理解する前に
まずはじめに、あなたが今使用しているブラウザが File API に対応しているか調べてみましょう。
調べるには javascript を利用します。 実際に対応していないユーザーのことも考えると、このポイントは押さえておいて損はないと思います。
サンプルコード: HTML
<body>
<input type="button" value="File API テスト" onclick="funcFileApiTest()">
<script>...</script>
</body>
サンプルコード: script
<script>
function funcFileApiTest(){
if(window.##File){
window.alert( "このブラウザには File API が実装されてます" );
}
else{
window.alert( "このブラウザには File API が実装されていません" );
}
}
</script>
サンプルコードと実行結果
ここでは、File Api が画像ファイルを受け入れるように設定してみます。
このサンプルでは、ご使用中のパソコンから画像ファイルを選択することで、このページのサンプル画像と置き換えて表示することができます。 なお、置き換えされる画像は 1つまでしか認識しない仕様にしています。
画像の送信やアップロードなどは行われません。 あくまでも お使いの PC 内での処理になりますが、 不明な点があり、不安を感じられる方は、どうでもよい適当な画像でお試しください。
サンプルコード: HTML
<body>
<div><input type="file" accept="image/*" id="idInFile"></div>
<div><img id="idOutputImage" src="zekkei.jpg" style="width: 20%;" alt="サンプル画像"></div>
</body>
サンプルコード: script
<script>
let elmInFile = document.getElementById("idInFile");
elmInFile.addEventListener("change", function(EO){
let objFile0 = EO.target.files[0];
let objFileReader = new FileReader();
objFileReader.readAsDataURL(objFile0);
objFileReader.addEventListener("load", function(){
idOutputImage.src = objFileReader.result;
}, false)
}, false);
</script>
参考: accept 属性の値
- 大まかなファイルの指定例
- accept="audio/*" (オーディオファイル全般)
- accept="image/*" (画像ファイル全般)
- accept="video/*" (ビデオファイル全般)
- 個別ファイルの指定例 (MIMEタイプ)
- accept="text/html" (HTML)
- accept="text/xml" (XML)
- accept="text/css" (CSS)
- accept="text/plain" (テキスト)
- accept="text/csv" (CSV)
- accept="image/png" (PNG)
- accept="image/jpeg" (JPEG)
- accept="image/gif" (GIF)
- accept="audio/mpeg" (MP3)
- accept="video/mpeg" (MPEG)
- accept="video/mp4" (MP4)
- accept="application/pdf" (PDF)
- 個別ファイルを複数指定する例
- accept="image/png,image/jpeg,image/gif"
補足: File API の種類と概要
File APIには用途別の種類がありますので、概要のみ説明しておきます。
| 種類 | 説明 |
|---|---|
| File API | ファイルの読み取りを行うAPI |
| File API:Writer | ファイルへの書き込みを行うAPI |
| File API:Directories and System | ディレクトリ階層内にフォルダやファイルの作成・保存を行うAPI |