目錄一、如何查看圖片的二進(jìn)制數(shù)據(jù)二、如何區(qū)分圖片的類型三、如何檢測圖片的類型3.1 定義 readBuffer 函數(shù)3.2 定義 check 函數(shù)3.3 檢測 PNG 圖片類型

我們會想到通過 input 元素的 accept 屬性來限制上傳的文件類型：

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

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

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

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

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

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

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

文件類型 文件后綴 魔數(shù) 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

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

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

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

三、如何檢測圖片的類型3.1 定義 readBuffer 函數(shù)

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

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

好的，在前端如何檢測文件類型就介紹到這里。在實際項目中，對于文件上傳的場景，出于安全考慮，建議小伙伴們在開發(fā)過程中，都限制一下文件上傳的類型。對于更嚴(yán)格的場景來說，就可以考慮使用阿寶哥介紹的方法來做文件類型的校驗。

以上就是JavaScript 檢測文件的類型的方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 檢測文件的類型的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！