前言

在Web項(xiàng)目開發(fā)過程中，文件上傳功能幾乎必不可少的，很多時(shí)候，我們?cè)谶M(jìn)行文件上傳時(shí)，尤其是向普通用戶開放文件上傳功能時(shí)，一般都需要對(duì)上傳文件的格式進(jìn)行一些限制，以防止不良用戶、黑客等將帶有病毒腳本文件上傳到服務(wù)器中，常見文件格式限制如下。

1、通過input標(biāo)簽的accept屬性進(jìn)行限制

我們可以通過HTML5中的 input file 標(biāo)簽的accept屬性，根據(jù)自己的需求，在選擇上傳文件的時(shí)候，指定可見的文件類型格式（默認(rèn)任意類型 ）來進(jìn)行限制。

實(shí)例代碼：

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

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

在JS中，可以在上傳事件中，通過file對(duì)象獲取到上傳文件的相關(guān)屬性。

實(shí)例代碼：

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

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

此時(shí)：我們根據(jù)文件的頭信息，來判斷文件真正的格式。

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

在JS中通過讀取文件的十六進(jìn)制的頭信息，來進(jìn)行限制，因?yàn)橄嗤愋臀募奈募^信息是相同的，即使用戶修改了文件的后綴名(擴(kuò)展名)，但文件的頭信息是不會(huì)改變的。

實(shí)例代碼：

// 讀取文件的二進(jìn)制數(shù)據(jù)并將其轉(zhuǎn)換為十六進(jìn)制 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); // 文件對(duì)象console.log(file.name); // 文件名稱 console.log(file.type); // 文件類型console.log(file.size); // 文件大小// 根據(jù)文件頭信息進(jìn)行判斷限制：如：只允許上傳 png 這種格式if(!await isPng(file)){ alert('對(duì)不起：上傳的圖片格式只能是：png格式！'); return false; } }

4、通過第三方的file-type工具包來進(jìn)行限制

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。