在日常工作中，文件上傳是一個很常見的功能。在某些情況下，我們希望能限制文件上傳的類型，比如限制只能上傳 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對于某一些類型的文件，起始的幾個字節內容都是固定的，根據這幾個字節的內容就可以判斷文件的類型。
常見圖片類型對應的魔數如下表所示：
| 文件類型 | 文件后綴 | 魔數 |
|---|---|---|
| JPEG | jpg/jpeg | 0xFF%20D8%20FF |
| PNG | png | 0x89%2050%204E%2047%200D%200A%201A%200A |
| GIF | gif | 0x47%2049%2046%2038（GIF8） |
| BMP | bmp | 0x42%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
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
