<input>要素の「accept」プロパティ で 「image/jpg」 と設定すると Safari で jpg が選択できなくなる

<input>要素にはacceptというプロパティがあります。

画像ファイルだけ選択できるようにしたいときにはaccept="image/*"などと設定すればよいわけです。条件に合わず選択できないファイルが薄く表示されます。

pngとjpgだけ選択できるようにしたいと考え、以下のように記述しました。

1accept="image/png, image/jpg"

問題なさそうですよね、実際 Chrome で見ると問題なさそうです。

さて、これを Safari で見るとどうなるでしょう。

なんと、jpgが選択できません。かなしいですね。

原因はacceptの設定ミスです。

固有ファイル種別指定子のところを読むと以下のように書いてあります。

• 有効な MIME タイプの文字列で、拡張子なしのもの。

で、jpgの有効なMIMEタイプはimage/jpegです

なので対処法としてはjpegにすれば良いです。

1accept="image/png, image/jpeg"

ややこしいのが、各ブラウザでよしなにしてくれちゃうってところですよね。Chromeはjpgと記述してもよしなにやってくれるのですが、そのおかげで今回の状態に気づきにくかったり。