上传前检查文件类型

Question

我正在开发插件，以便在上传之前预览和裁剪图像。 我遇到了一个有趣的错误。

我正在验证文件扩展名以确定它是否是图像。 但是我的一个用户只是在Total Commander中更改文本文件扩展名并尝试上传它。

这是代码的一部分：

reader.onload = function(e) {
  if(e.target.result.indexOf("data:image")) { //check if file have an image extension
    return false;
  }   
  var image = new Image();
  image.src = e.target.result;
  image.onload = function() {
    // Never have been triggered if user tries to upload text file with *.jpg     extension
  }
}

如何检查文件是否为图像并显示其他警告？

Answer 1

如果依赖文件扩展名不够好，可以检查文件的第一个字节并检查一些常见的标题。

这些是

的第一个字节

• JPEG: FF D8
• GIF: 47 49 46
• PNG: xx 80 78 71

见：http://www.mikekunz.com/image_file_header.html＆amp; http://www.libpng.org/pub/png/book/chapter08.html#png.ch08.div.2

您可以使用文件API读取字节：HTML5 File API read as text and binary

请记住，仍然可以在客户端修改客户端javascript检查。这样您就需要重新检查服务器。这就是为什么可能只是检查客户端上的扩展名就足够了。主动尝试上传非图像的用户可能会绕过两个客户端检查。