入力ファイルフィールドの画像のみを受け入れる方法

フォームにファイルフィールドを追加するときは、セレクターを画像に制限することをお勧めします

もちろん、サーバー側のフィルターを追加することもできますが、クライアント側のフィルターを使用することは、ユーザーにとって優れたUXです。ファイルを送信してエラーを返すために時間とリソースを無駄にすることはありません。

あなたはを使用してそうすることができますaccept属性、および受け入れるファイルのMIMEタイプを指定します。

image/*すべての画像をキャッチする必要があります。

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

特定のファイルタイプのみを許可する場合は、それらをリストします。

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

この属性のブラウザサポートは、次の場所で確認できます。https://caniuse.com/#feat=input-file-accept

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: