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">

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

例えば、イメージ形式のファイルのみ許可する場合

var imgUpload = document.getElementById('imgUpload');
imgUpload.addEventListener("change", function(e) {
  var files = e.target.files;
  for (var i = 0, file; file = files[i]; i++) {
    if (!file.type.match('image.*')) {
      // ok
      continue;
    } else {
      // ng
      break;
      alert('許可されていません');
    }
  }
});
twitterfacebookhatenafacebook