HTMLで画像タイプのみを許可する方法

accept属性を使用する方法: HTMLのinput要素には、accept属性を使用して受け入れるファイルタイプを指定することができます。画像ファイルの場合、accept属性に"image/*"と指定します。

<input type="file" accept="image/*">

この方法では、ファイル選択ダイアログで画像ファイル以外のファイルが選択できなくなります。

JavaScriptを使用する方法: JavaScriptを使って、ファイルが選択された際にそのファイルのタイプをチェックすることもできます。以下は、JavaScriptを使用した例です。

<input type="file" id="myFile" onchange="validateFileType(this)">
<script>
 function validateFileType(input) {
   var file = input.files[0];
   var fileType = file.type;
   if (fileType.split('/')[0] !== 'image') {
     alert('画像ファイルのみ選択してください。');
     input.value = ''; // 選択されたファイルをクリアする
   }
 }
</script>

この方法では、ファイルが選択された後にJavaScriptが実行され、画像ファイル以外が選択された場合に警告メッセージが表示されます。