本稿はHTMLのinput要素でファイルを選択させる際に拡張子を限定させる方法を記載します。

input要素にaccept属性を付与することで拡張子を限定させることが出来ます。

<!--コンテントタイプを指定する場合--> <input type='file' accept="image/jpg"> <!--拡張子を指定する場合--> <input type='file' accept=".jpg"> <!--画像ファイル全般を指定する場合--> <input type='file' accept="image/*">

コンテントタイプの一覧はこちらを参照してください。