☰

許可する方法画像ファイルのみを受け入れるには？質問する

tag-icon • tag-icon html image input file-upload
許可する方法画像ファイルのみを受け入れるには？質問する

タグを介して画像ファイルのみをアップロードする必要があります<input type="file">。

現時点では、すべてのファイルタイプが受け入れられます。ただし、、、などを含む特定の画像ファイル拡張子のみに制限したいと考えています.jpg。.gif

この機能を実現するにはどうすればいいでしょうか?

ベストアンサー1

入力タグのaccept属性を使用します。PNG、JPEG、GIF のみを受け入れるには、次のコードを使用します。

<label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

あるいは単純に:

<label>Your Image File
  <input type="file" name="myImage" accept="image/*" />
</label>

これは、ユーザーに表示するファイルの種類についてブラウザにヒントを提供するだけであり、簡単に回避できるため、アップロードされたファイルをサーバー上でも常に検証する必要があることに注意してください。

IE 10 以降、Chrome、Firefox、Safari 6 以降、Opera 15 以降で動作するはずですが、モバイルでのサポートは非​​常に不十分です (2015 年現在)。また、一部のレポートによると、このため一部のモバイル ブラウザーではまったくアップロードできない可能性があるので、対象プラットフォームをよくテストしてください。

ブラウザのサポートの詳細については、http://caniuse.com/#feat=入力ファイル受け入れ

おすすめ記事