JavaScript 如何檢測文件的類型?

在平常工做中,文件上傳是一個很常見的功能。在某些狀況下,咱們但願能限制文件上傳的類型,好比限制只能上傳 PNG 格式的圖片。針對這個問題,咱們會想到經過 input 元素的 accept 屬性來限制上傳的文件類型:javascript

<input type="file" id="inputFile" accept="image/png" />
複製代碼

這種方案雖然能夠知足大多數場景,但若是用戶把 JPEG 格式的圖片後綴名更改成 .png 的話,就能夠成功突破這個限制。那麼應該如何解決這個問題呢?其實咱們能夠經過讀取文件的二進制數據來識別正確的文件類型。在介紹具體的實現方案前,阿寶哥先以圖片類型的文件爲例,來介紹一下相關的知識。html

1、如何查看圖片的二進制數據

要查看圖片對應的二進制數據,咱們能夠藉助一些現成的編輯器,好比 Windows 平臺下的 WinHex 或 macOS 平臺下的 Synalyze It! Pro 十六進制編輯器。這裏咱們使用 Synalyze It! Pro 這個編輯器,以十六進制的形式來查看阿寶哥頭像對應的二進制數據。前端

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書(累計下載 3萬+)及 50 幾篇 TS 系列教程。java

2、如何區分圖片的類型

計算機並非經過圖片的後綴名來區分不一樣的圖片類型,而是經過 「魔數」(Magic Number)來區分。 對於某一些類型的文件,起始的幾個字節內容都是固定的,根據這幾個字節的內容就能夠判斷文件的類型。git

常見圖片類型對應的魔數以下表所示:github

文件類型 文件後綴 魔數
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 個字節是 0x89 50 4E 47 0D 0A 1A 0A。當你把 abao.png 文件修改成 abao.jpeg 後,再用編輯器打開查看圖片的二進制內容,你會發現文件的前 8 個字節仍是保持不變。但若是使用 input[type="file"] 輸入框的方式來讀取文件信息的話,將會輸出如下結果:安全

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

3、如何檢測圖片的類型

3.1 定義 readBuffer 函數

在獲取文件對象後,咱們能夠經過 FileReader API 來讀取文件的內容。由於咱們並不須要讀取文件的完整信息,因此阿寶哥封裝了一個 readBuffer 函數,用於讀取文件中指定範圍的二進制數據。markdown

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 個字節是 0x89 50 4E 47 0D 0A 1A 0A。所以,咱們在檢測已選擇的文件是否爲 PNG 類型的圖片時,只須要讀取前 8 個字節的數據,並逐一判斷每一個字節的內容是否一致。

3.2 定義 check 函數

爲了實現逐字節比對並可以更好地實現複用,阿寶哥定義了一個 check 函數:

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

3.3 檢測 PNG 圖片類型

基於前面定義的 readBuffercheck 函數,咱們就能夠實現檢測 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圖片對應的魔數
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 }`;
}
複製代碼

以上示例成功運行後,對應的檢測結果以下圖所示:

由上圖可知,咱們已經能夠成功地檢測出正確的圖片格式。若是你要檢測 JPEG 文件格式的話,你只須要定義一個 isJPEG 函數:

const isJPEG = check([0xff, 0xd8, 0xff])
複製代碼

然而,若是你要檢測其餘類型的文件,好比 PDF 文件的話,應該如何處理呢?這裏咱們先使用 Synalyze It! Pro 編輯器來瀏覽一下 PDF 文件的二進制內容:

觀察上圖可知,PDF 文件的頭 4 個字節的是 0x25 50 44 46,對應的字符串是 %PDF。爲了讓用戶能更直觀地辨別出檢測的類型,阿寶哥定義了一個 stringToBytes 函數:

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

基於 stringToBytes 函數,咱們就能夠很容易的定義一個 isPDF 函數,具體以下所示:

const isPDF = check(stringToBytes("%PDF"));
複製代碼

有了 isPDF 函數,你就實現 PDF 文件檢測的功能了。但在實際工做中,遇到的文件類型是多種多樣的,針對這種情形,你可使用現成的第三庫來實現文件檢測的功能,好比 file-type 這個庫。

其實基於文件的二進制數據,除了能夠檢測文件的類型以外,咱們還能夠讀取文件相關的元信息,好比圖片的尺寸、位深度、色彩類型和壓縮算法等,咱們繼續以阿寶哥的頭像(abao.png)爲例,來看一下實際的狀況:

好的,在前端如何檢測文件類型就介紹到這裏。在實際項目中,對於文件上傳的場景,出於安全考慮,建議小夥伴們在開發過程當中,都限制一下文件上傳的類型。對於更嚴格的場景來講,就能夠考慮使用阿寶哥介紹的方法來作文件類型的校驗。此外,若是你對前端如何處理二進制數據感興趣能夠閱讀 玩轉前端二進制

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書(累計下載 3萬+)及 11 篇 Vue 3 進階系列教程。想一塊兒學習 TS/Vue 3.0 的小夥伴能夠添加阿寶哥微信 —— semlinker

4、參考資源

相關文章
相關標籤/搜索