はじめに
<input type=”file”>を使用したファイルのアップロードで、アップロードできる画像や動画の拡張子を制限したい場面があります。accept属性を使用することで、特定の拡張子のファイルのみを受け付けることができます。
実装方法
HTML
<input type="file" />デフォルトでは、すべてのファイルを指定できてしまいます。
accept属性を指定することで、アップロード可能なファイルの拡張子を制限することができます。
画像ファイルのみを許可する場合
HTML
<input type="file" accept="image/*">
特定の画像拡張子のみを許可する場合
HTML
<input type="file" accept=".jpg,.jpeg,.png">
動画ファイルのみを許可する場合
HTML
<input type="file" accept="video/*">
特定の動画拡張子のみを許可する場合
HTML
<input type="file" accept=".mp4,.mov,.avi">
まとめ
accept属性を使用することで、ファイルのアップロード時に特定の拡張子のみを許可することができます。これにより、ユーザーがアップロードできるファイルを制限し、誤ったファイルのアップロードを防ぐことができます。
参考サイト
こちらのサイトを参考にさせていただきました。
