如何使用JavaScript 檢測文件的類型

這篇文章將為大家詳細講解有關如何使用JavaScript 檢測文件的類型，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

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

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

二、如何區分圖片的類型

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

常見圖片類型對應的魔數如下表所示：

同樣使用 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.1 定義 readBuffer 函數

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

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 圖片類型

基于前面定義的 readBuffer 和 check 函數，我們就可以實現檢測 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 這個庫。

JavaScript有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

關于如何使用JavaScript 檢測文件的類型就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。