HTML Living Standard/accept属性
accept属性
[編集]accept属性は、ファイル入力フィールドにおいて、ユーザーが選択可能なファイルの種類を制限するための属性です。この属性を使用することで、特定のファイル形式や MIME タイプを指定し、許可されるファイルを制御できます。
基本構文
[編集]<input type="file" accept="MIME_type, .file_extension">
accept属性の値として、以下の形式を指定できます：
- MIME タイプ (例:
image/png,audio/mpeg) - ファイル拡張子 (例:
.png,.mp3) - ワイルドカード (例:
image/*,audio/*)
効果
[編集]accept属性を指定すると、以下の動作が適用されます：
- ユーザーがファイル選択ダイアログで選択可能なファイルが制限されます。
- 制限されるのは クライアント側のみ で、サーバーサイドでの検証も推奨されます。
使用例
[編集]以下は、accept属性の使用例です。
画像ファイルのみを許可
[編集]<input type="file" accept="image/jpeg, image/png, image/gif">
音声ファイル全般を許可
[編集]<input type="file" accept="audio/*">
特定のドキュメント形式を許可
[編集]<input type="file" accept=".pdf, .doc, .docx, .xls, .xlsx">
複数の種類を許可
[編集]<input type="file" accept="image/*, video/*, .pdf">
この例では、画像、動画、および PDF ファイルが選択可能です。
JavaScriptを使用した制御
[編集]accept属性は、JavaScriptで動的に設定することも可能です。
<input type="file" id="fileInput"> <script> const fileInput = document.getElementById("fileInput"); fileInput.accept = "image/png, .jpg"; // 動的に許可するファイル形式を設定 </script>
この例では、画像ファイル（PNG と JPEG）のみが許可されます。
注意点
[編集]accept属性は、クライアント側でのファイル形式制限に使用されますが、必ずしも完全な制限を保証するものではありません。- セキュリティの観点から、アップロードされたファイルの形式や内容はサーバー側で検証する必要があります。
- 一部の古いブラウザでは、この属性がサポートされない場合があります。
互換性
[編集]互換性 ブラウザ サポート状況 Chrome 対応 Edge 対応 Firefox 対応 Safari 対応 Opera 対応