HTML でファイルのアップロードを実装するのはかなり簡単ですが、タグに追加できる「accept」属性があることに気付きました<input type="file" ...>。
この属性は、画像などのファイルのアップロードを制限する方法として役立ちますか? 最適な使用方法は何ですか?
あるいは、HTML ファイル入力タグのファイル タイプを、できればファイル ダイアログで制限する方法はありますか?
ベストアンサー1
このaccept属性は非常に便利です。これは、現在の で許可されているファイルのみを表示するようブラウザに指示するものですinput。通常、この属性はユーザーが上書きできますが、デフォルトで結果を絞り込むのに役立ちます。これにより、ユーザーは何百もの異なるファイル タイプを精査することなく、探しているものを正確に取得できます。
使用法
注:これらの例は現在の仕様に基づいて作成されており、すべての (またはいずれかの) ブラウザーで実際に機能するとは限りません。仕様は将来変更される可能性があり、その場合、これらの例が機能しなくなる可能性があります。
h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>
<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>
<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>
<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>
<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>HTML仕様より（ソース）
この
accept属性を指定すると、ユーザー エージェントに受け入れられるファイルの種類のヒントを提供できます。指定する場合、属性はカンマで区切られたトークンのセットそれぞれはASCII大文字小文字を区別しない次のいずれかに一致します。
文字列
audio/*
- サウンドファイルが受け入れられることを示します。
文字列
video/*
- ビデオファイルが受け入れられることを示します。
文字列
image/*
- 画像ファイルが受け入れられることを示します。
あパラメータなしの有効な MIME タイプ
- 指定されたタイプのファイルが受け入れられることを示します。
最初の文字が U+002E ピリオド文字 (.) である文字列
- 指定されたファイル拡張子を持つファイルが受け入れられることを示します。