前言

在Web項目開發過程中，文件上傳功能幾乎必不可少的，很多時候，我們在進行文件上傳時，尤其是向普通用戶開放文件上傳功能時，一般都需要對上傳文件的格式進行一些限制，以防止不良用戶、黑客等將帶有病毒腳本文件上傳到服務器中，常見文件格式限制如下。

1、通過input標簽的accept屬性進行限制

我們可以通過HTML5中的 input file 標簽的accept屬性，根據自己的需求，在選擇上傳文件的時候，指定可見的文件類型格式（默認任意類型 ）來進行限制。

實例代碼：

<input type="file" id="oFile" name="myFiles" accept=".doc, .docx, .xls, .txt" onchange="upFile(event)" />

2、通過JS獲取上傳文件的file.type 或 file.name屬性進行限制

在JS中，可以在上傳事件中，通過file對象獲取到上傳文件的相關屬性。

實例代碼：

function upFile(event) {const [ file ] = event.target.files || event.dataTransfer.files || this.file.files;console.dir(file); // 文件對象console.log(file.name); // 文件名稱 console.log(file.type); // 文件類型console.log(file.size); // 文件大小// 對文件類型做簡單限制：如：只允許上傳 jpg png gif 這3種格式if(!file.type && /\.(?:jpg|png|gif)$/.test(file.name)) ){ alert('對不起：上傳的圖片格式只能是：jpg, png, gif 格式！'); return false; } }

以上兩種方式是我們最常見的文件上傳類型限制方法，但是，如果單純的以文件后綴名(擴展名)、文件類型進行截取的方式來進行限制，是非常容易遭到破解的，比如，用戶要將文件的后綴名(擴展名)，重命為你指定的可上傳的文件類型，就繞過了你的限制，便可以完成上傳。

此時：我們根據文件的頭信息，來判斷文件真正的格式。

3、通過JS的FileReader方法獲取上傳文件的頭信息進行限制

在JS中通過讀取文件的十六進制的頭信息，來進行限制，因為相同類型文件的文件頭信息是相同的，即使用戶修改了文件的后綴名(擴展名)，但文件的頭信息是不會改變的。

實例代碼：

// 讀取文件的二進制數據并將其轉換為十六進制 function fileReader (blob) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsBinaryString(blob);reader.onload = (ret) => {const res = reader.result.split('').map((o) => o.charCodeAt().toString(16).padStart(2, '0'));resolve(res.join(' ').toUpperCase());},reader.onerror = (err) => {reject(err);};}); };// png格式 async function isPng(file) {return (await fileReader(file.slice(0, 8))) == "89 50 4E 47 0D 0A 1A 0A"; };// jpg格式 async function isJpg(file) {const start = await fileReader(file.slice(0, 2));const end = await fileReader(file.slice(-2, file.size));return "FF D8" == start && "FF D9" == end; };// gif格式 async function isGif(file) {const ret = await fileReader(file.slice(0, 6));return "47 49 46 38 39 61" == ret || "47 49 46 38 37 61" == ret; };async function upFile(event) {const [ file ] = event.target.files || event.dataTransfer.files || this.file.files;console.dir(file); // 文件對象console.log(file.name); // 文件名稱 console.log(file.type); // 文件類型console.log(file.size); // 文件大小// 根據文件頭信息進行判斷限制：如：只允許上傳 png 這種格式if(!await isPng(file)){ alert('對不起：上傳的圖片格式只能是：png格式！'); return false; } }

4、通過第三方的file-type工具包來進行限制

file-type工具包也是用Js來進行封裝的，其原理和上面的第3種方式一樣，它支持的文件類型有幾十種，幾乎能滿足我們的日常開發需求。

Npm地址：https://www.npmjs.com/package/file-type

總結

以上是生活随笔為你收集整理的Web前端 Js文件上传类型限制(根据文件头信息判断)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。