在日常工作中,文件上传是一个很常见的功能。在某些情况下,我们希望能限制文件上传的类型,比如限制只能上传 PNG 格式的图片。针对这个问题,我们会想到通过 input
元素的 accept
属性来限制上传的文件类型:
<input type="file" id="inputFile" accept="image/png" />
这种方案虽然可以满足大多数场景,但如果用户把 JPEG 格式的图片后缀名更改为 .png
的话,就可以成功突破这个限制。因为通过 文件后缀名或文件的 MIME 类型 并不能识别出正确的文件类型。我们可以通过读取文件的二进制数据来识别正确的文件类型。
如何通过二进制查看图片的类型
计算机并不是通过图片的后缀名来区分不同的图片类型,而是通过 Magic Number 来区分。 对于某一些类型的文件,起始的几个字节内容都是固定的,根据这几个字节的内容就可以判断文件的类型。
常见图片类型对应的 Magic Number 如下表所示:
文件类型 | 文件后缀 | 魔数 |
---|---|---|
JPEG | jpg/jpeg | 0xFF D8 FF |
PNG | png | 0x89 50 4E 47 0D 0A 1A 0A |
GIF | gif | 0x47 49 46 38(GIF8) |
BMP | bmp | 0x42 4D |