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
      alert("許可されていません");
      break;
    }
  }
});