[jQuery] input type=”file”で選択するファイルを画像のみに制限する方法

簡易的な方法ではあるが制限してみる。

#HTML5 の accept属性 を使う

#大まかに許可する場合

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

以下のような指定で、それぞれ画像音声映像を許可することができる。

  • accept=”image/*”
  • accept=”audio/*”
  • accept=”video/*”

#許可される拡張子は以下の通り

#image

.jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw

#audio

.aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma

#video

.avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid

#MIMEタイプを指定する場合

<input type="file" name="example" accept="image/png">

複数指定する場合は以下のようにカンマ区切りで指定

<input type="file" name="example" accept="image/png, image/jpeg, image/gif">

#jQuery で選択したファイルをチェックする

例えば、png形式のファイルのみ許可しあい場合

$('#imgUpload').on('change', function() {
  var file = $(this).prop('files')[0];

  if ( file.type == 'image/png' ) {
    // OK
  } else {
    alert('許可されていません');
  }
});

type="file"でローカルのファイルを選択した際にchangeイベントで選択したファイルを確認する。
ちなみにファイルタイプ(file.type)をチェックするところは、ファイル名から拡張子取り出しても何でも良い。

#おわり

HTML5のaccept属性とJavaScript(jQuery)のチェック、これらは併用しても問題ない。

twitterfacebookhatenafacebook