javascript - 上传前检查文件类型

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

如果依赖文件扩展名对您来说不够好，可以检查文件的前字节并检查一些常见的 header 。

这些是第一个字节

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

参见:http://www.mikekunz.com/image_file_header.html & http://www.libpng.org/pub/png/book/chapter08.html#png.ch08.div.2

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

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