javascript - 如何通过 FileReader 检查上传图片的类型？

Question

有以下代码在上传到服务器之前进行预览:

$(function(){
    var preview = $(".preview");

  $("#menu_image").change(function(event){
    var input = $(event.currentTarget);
    var file = input[0].files[0];
    var reader = new FileReader();
    reader.onload = function(e){
      var img = new Image;
      img.onload = function() {
        if ((img.with != 160) || (img.height != 160)) {
          return;
        }
        preview.attr("src", img.src);        
      };
      img.src = e.target.result;
    };

    reader.readAsDataURL(file);
  });
});

但是这段代码不检查文件的类型。我该怎么做？提前致谢。

Answer 1

您无需加载 FileReader 即可知道文件类型。使用您的代码:

var file = input[0].files[0];

就像检查 file.type 属性一样简单。

您可以检查文件是否为图片:

if (file.type.match('image.*')) {
    console.log("is an image");
}

哪种类型的图像是:

if (file.type.match('image.*')) {
    console.log("is an image");
    console.log("Show type of image: ", file.type.split("/")[1]);
}    

注意 file.type.split("/")[1] 应该是一个“图像”