JavaScript怎么檢測文件的類型

這篇文章主要介紹JavaScript怎么檢測文件的類型，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在日常工作中，文件上傳是一個很常見的功能。在某些情況下，我們希望能限制文件上傳的類型，比如限制只能上傳 PNG 格式的圖片。針對這個問題，我們會想到通過  input 元素的 accept 屬性來限制上傳的文件類型：

<input type="file" id="inputFile" accept="image/png" />

這種方案雖然可以滿足大多數(shù)場景，但如果用戶把 JPEG 格式的圖片后綴名更改為 .png  的話，就可以成功突破這個限制。那么應(yīng)該如何解決這個問題呢?其實我們可以通過讀取文件的二進制數(shù)據(jù)來識別正確的文件類型。在介紹具體的實現(xiàn)方案前，阿寶哥先以圖片類型的文件為例，來介紹一下相關(guān)的知識。

一、如何查看圖片的二進制數(shù)據(jù)

要查看圖片對應(yīng)的二進制數(shù)據(jù)，我們可以借助一些現(xiàn)成的編輯器，比如 Windows 平臺下的 WinHex 或 macOS 平臺下的 Synalyze It!  Pro 十六進制編輯器。這里我們使用 Synalyze It! Pro 這個編輯器，以十六進制的形式來查看阿寶哥頭像對應(yīng)的二進制數(shù)據(jù)。

二、如何區(qū)分圖片的類型

計算機并不是通過圖片的后綴名來區(qū)分不同的圖片類型，而是通過 “魔數(shù)”(Magic Number)來區(qū)分。  對于某一些類型的文件，起始的幾個字節(jié)內(nèi)容都是固定的，根據(jù)這幾個字節(jié)的內(nèi)容就可以判斷文件的類型。

常見圖片類型對應(yīng)的魔數(shù)如下表所示：

同樣使用 Synalyze It! Pro 這個編輯器，來驗證一下阿寶哥的頭像(abao.png)的類型是否正確：

由上圖可知，PNG 類型的圖片前 8 個字節(jié)是 0x89 50 4E 47 0D 0A 1A 0A。當(dāng)你把 abao.png 文件修改為  abao.jpeg 后，再用編輯器打開查看圖片的二進制內(nèi)容，你會發(fā)現(xiàn)文件的前 8 個字節(jié)還是保持不變。但如果使用 input[type="file"]  輸入框的方式來讀取文件信息的話，將會輸出以下結(jié)果：

很明顯通過 文件后綴名或文件的 MIME 類型  并不能識別出正確的文件類型。接下來，阿寶哥將介紹在上傳圖片時，如何通過讀取圖片的二進制信息來確保正確的圖片類型。

三、如何檢測圖片的類型

3.1 定義 readBuffer 函數(shù)

在獲取文件對象后，我們可以通過 FileReader API 來讀取文件的內(nèi)容。因為我們并不需要讀取文件的完整信息，所以阿寶哥封裝了一個  readBuffer 函數(shù)，用于讀取文件中指定范圍的二進制數(shù)據(jù)。

function readBuffer(file, start = 0, end = 2) {   return new Promise((resolve, reject) => {     const reader = new FileReader();     reader.onload = () => {       resolve(reader.result);     };     reader.onerror = reject;     reader.readAsArrayBuffer(file.slice(start, end));   }); }

對于 PNG 類型的圖片來說，該文件的前 8 個字節(jié)是 0x89 50 4E 47 0D 0A 1A 0A。因此，我們在檢測已選擇的文件是否為 PNG  類型的圖片時，只需要讀取前 8 個字節(jié)的數(shù)據(jù)，并逐一判斷每個字節(jié)的內(nèi)容是否一致。

3.2 定義 check 函數(shù)

為了實現(xiàn)逐字節(jié)比對并能夠更好地實現(xiàn)復(fù)用，阿寶哥定義了一個 check 函數(shù)：

function check(headers) {   return (buffers, options = { offset: 0 }) =>     headers.every(       (header, index) => header === buffers[options.offset + index]     ); }

3.3 檢測 PNG 圖片類型

基于前面定義的 readBuffer 和 check 函數(shù)，我們就可以實現(xiàn)檢測 PNG 圖片的功能：

3.3.1 html 代碼

<div>    選擇文件：<input type="file" id="inputFile" accept="image/*"               onchange="handleChange(event)" />    <p id="realFileType"></p> </div>

3.3.2 JS 代碼

const isPNG = check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); // PNG圖片對應(yīng)的魔數(shù) const realFileElement = document.querySelector("#realFileType");  async function handleChange(event) {   const file = event.target.files[0];   const buffers = await readBuffer(file, 0, 8);   const uint8Array = new Uint8Array(buffers);   realFileElement.innerText = `${file.name}文件的類型是：${     isPNG(uint8Array) ? "image/png" : file.type   }`; }

以上示例成功運行后，對應(yīng)的檢測結(jié)果如下圖所示：

由上圖可知，我們已經(jīng)可以成功地檢測出正確的圖片格式。如果你要檢測 JPEG 文件格式的話，你只需要定義一個 isJPEG 函數(shù)：

const isJPEG = check([0xff, 0xd8, 0xff])

然而，如果你要檢測其他類型的文件，比如 PDF 文件的話，應(yīng)該如何處理呢?這里我們先使用 Synalyze It! Pro 編輯器來瀏覽一下 PDF  文件的二進制內(nèi)容：

觀察上圖可知，PDF 文件的頭 4 個字節(jié)的是 0x25 50 44 46，對應(yīng)的字符串是  %PDF。為了讓用戶能更直觀地辨別出檢測的類型，阿寶哥定義了一個 stringToBytes 函數(shù)：

function stringToBytes(string) {   return [...string].map((character) => character.charCodeAt(0)); }

基于 stringToBytes 函數(shù)，我們就可以很容易的定義一個 isPDF 函數(shù)，具體如下所示：

const isPDF = check(stringToBytes("%PDF"));

有了 isPDF 函數(shù)，你就實現(xiàn) PDF  文件檢測的功能了。但在實際工作中，遇到的文件類型是多種多樣的，針對這種情形，你可以使用現(xiàn)成的第三庫來實現(xiàn)文件檢測的功能，比如 file-type  這個庫。

其實基于文件的二進制數(shù)據(jù)，除了可以檢測文件的類型之外，我們還可以讀取文件相關(guān)的元信息，比如圖片的尺寸、位深度、色彩類型和壓縮算法等，我們繼續(xù)以阿寶哥的頭像(abao.png)為例，來看一下實際的情況：

好的，在前端如何檢測文件類型就介紹到這里。在實際項目中，對于文件上傳的場景，出于安全考慮，建議小伙伴們在開發(fā)過程中，都限制一下文件上傳的類型。對于更嚴(yán)格的場景來說，就可以考慮使用阿寶哥介紹的方法來做文件類型的校驗。此外，如果你對前端如何處理二進制數(shù)據(jù)感興趣可以閱讀  玩轉(zhuǎn)前端二進制。

以上是“JavaScript怎么檢測文件的類型”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！