JavaScript 如何检测文件的类型？ _JavaScript

在日常工作中，文件上传是一个很常见的功能。在某些情况下，我们希望能限制文件上传的类型，比如限制只能上传 PNG 格式的图片。针对这个问题，我们会想到通过 input 元素的 accept 属性来限制上传的文件类型：
<input type="file" id="inputFile" accept="image/png" />复制代码这种方案虽然可以满足大多数场景，但如果用户把 JPEG 格式的图片后缀名更改为 .png 的话，就可以成功突破这个限制。那么应该如何解决这个问题呢？其实我们可以通过读取文件的二进制数据来识别正确的文件类型。在介绍具体的实现方案前，阿宝哥先以图片类型的文件为例，来介绍一下相关的知识。
一、如何查看图片的二进制数据要查看图片对应的二进制数据，我们可以借助一些现成的编辑器，比如 windows 平台下的 WinHex 或 macOS 平台下的 Synalyze It! Pro 十六进制编辑器。这里我们使用 Synalyze It! Pro 这个编辑器，以十六进制的形式来查看阿宝哥头像对应的二进制数据。

文章插图

关注「全栈修仙之路」阅读阿宝哥原创的%204%20本免费电子书（累计下载%203万+）及%2050%20几篇%20TS%20系列教程。

二、如何区分图片的类型计算机并不是通过图片的后缀名来区分不同的图片类型，而是通过%20“魔数”（Magic%20Number）来区分。%20对于某一些类型的文件，起始的几个字节内容都是固定的，根据这几个字节的内容就可以判断文件的类型。
【JavaScript 如何检测文件的类型？】常见图片类型对应的魔数如下表所示：
文件类型文件后缀魔数 JPEGjpg/jpeg0xFF%20D8%20FFPNGpng0x89%2050%204E%2047%200D%200A%201A%200AGIFgif0x47%2049%2046%2038（GIF8）BMPbmp0x42%204D 同样使用%20Synalyze%20It!%20Pro%20这个编辑器，来验证一下阿宝哥的头像（abao.png）的类型是否正确：

文章插图
由上图可知， PNG%20类型的图片前%208%20个字节是%200x89%2050%204E%2047%200D%200A%201A%200A 。当你把%20abao.png 文件修改为 abao.jpeg 后，再用编辑器打开查看图片的二进制内容，你会发现文件的前 8 个字节还是保持不变。但如果使用 input[type="file"] 输入框的方式来读取文件信息的话，将会输出以下结果：

文章插图
好的，在前端如何检测文件类型就介绍到这里。在实际项目中，对于文件上传的场景，出于安全考虑，建议小伙伴们在开发过程中，都限制一下文件上传的类型。对于更严格的场景来说，就可以考虑使用阿宝哥介绍的方法来做文件类型的校验。此外，如果你对前端如何处理二进制数据感兴趣可以阅读玩转前端二进制。
作者：阿宝哥
链接：https://juejin.cn/post/6971935704938971173
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。