如何用JavaScript准确判断一个文件的类型？

本文共计1947个文字，预计阅读时间需要8分钟。

目录

一、如何查看图片的二进制数据

二、如何区分图片的类型

三、如何检测图片的类型

3.1 定义 readBuffer 函数

3.2 定义 check 函数

3.3 检测 PNG 图片类型

我们希望通过 input 元素的 acc 来检测图片类型。

目录

• 一、如何查看图片的二进制数据
• 二、如何区分图片的类型
• 三、如何检测图片的类型
• 3.1 定义 readBuffer 函数
  
• 3.2 定义 check 函数
  
• 3.3 检测 PNG 图片类型
  

我们会想到通过 input 元素的 accept 属性来限制上传的文件类型：

<inputtype="file"id="inputFile"accept="image/png"/>

这种方案虽然可以满足大多数场景，但如果用户把 JPEG 格式的图片后缀名更改为 .png 的话，就可以成功突破这个限制。那么应该如何解决这个问题呢？其实我们可以通过读取文件的二进制数据来识别正确的文件类型。在介绍具体的实现方案前，阿宝哥先以图片类型的文件为例，来介绍一下相关的知识。

一、如何查看图片的二进制数据

要查看图片对应的二进制数据，我们可以借助一些现成的编辑器，比如 Windows 平台下的 WinHex 或 macOS 平台下的 Synalyze It! Pro 十六进制编辑器。