日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
JavaScript如何檢測(cè)文件的類型？

本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。

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

 
 
 
 
    
  
  
  
  
    2.

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

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

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

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

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

常見圖片類型對(duì)應(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 這個(gè)編輯器，來(lái)驗(yàn)證一下阿寶哥的頭像(abao.png)的類型是否正確：

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

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

三、如何檢測(cè)圖片的類型

3.1 定義 readBuffer 函數(shù)

在獲取文件對(duì)象后，我們可以通過(guò) FileReader API 來(lái)讀取文件的內(nèi)容。因?yàn)槲覀儾⒉恍枰x取文件的完整信息，所以阿寶哥封裝了一個(gè) readBuffer 函數(shù)，用于讀取文件中指定范圍的二進(jìn)制數(shù)據(jù)。

 
 
 
 
    
  
  
  
  
  1. function readBuffer(file, start = 0, end = 2) {
    2. 
  
  
  
  
  2.   return new Promise((resolve, reject) => {
    3. 
  
  
  
  
  3.     const reader = new FileReader();
    4. 
  
  
  
  
  4.     reader.onload = () => {
    5. 
  
  
  
  
  5.       resolve(reader.result);
    6. 
  
  
  
  
  6.     };
    7. 
  
  
  
  
  7.     reader.onerror = reject;
    8. 
  
  
  
  
  8.     reader.readAsArrayBuffer(file.slice(start, end));
    9. 
  
  
  
  
  9.   });
    10. 
  
  
  
  
  10. }
    11.

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

3.2 定義 check 函數(shù)

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

 
 
 
 
    
  
  
  
  
  1. function check(headers) {
    2. 
  
  
  
  
  2.   return (buffers, options = { offset: 0 }) =>
    3. 
  
  
  
  
  3.     headers.every(
    4. 
  
  
  
  
  4.       (header, index) => header === buffers[options.offset + index]
    5. 
  
  
  
  
  5.     );
    6. 
  
  
  
  
  6. }
    7.

3.3 檢測(cè) PNG 圖片類型

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

3.3.1 html 代碼

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.    選擇文件：
  
  
  
  
  3.               onchange="handleChange(event)" />
    4. 
  
  
  
  
  4.    
    5.

3.3.2 JS 代碼

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

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

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

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. const isPDF = check(stringToBytes("%PDF"));
    2.

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

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

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

四、參考資源

玩轉(zhuǎn)前端二進(jìn)制

MDN - FileReader


分享名稱：JavaScript如何檢測(cè)文件的類型？
標(biāo)題路徑：http://www.dlmjj.cn/article/dhjdsij.html