写了一部分简单代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
<input type="file" name="" id="input_file">
<button id="verify">识别</button>
<span id="type"></span>
</body>
</html>
main.js
// 魔数来源：https://www.garykessler.net/library/file_sigs.html
// 有一个开源库做了同样的事情：https://github.com/sindresorhus/file-type
// 
const magicjson = {
"D0CF11E0A1B11AE1": "application/wps-office.ppt",
"89504E470D0A1A0A": "image/png",
"6674797071742020": "video/quicktime",
"504B030414000600": "application/wps-office.xlsx",
"504B03040A000000": "application/wps-office.docx",
"3C68746D6C3E0A0A": "text/html",
"3C21646F63747970": "text/html",
"526172211A0700": "application/vnd.rar",
"7F454C46": "application/x-sharedlib",
"504B0304": "application/zip",
"464C5601": "video/x-flv",
"3C737667": "image/svg+xml",
"25504446": "application/pdf",
"1A45DFA3": "video/webm",
"FFD8": "image/jpeg", // (.jpg, .jpeg, .jfif, .pjpeg, .pjp)
"4D5A": "application/x-ms-dos-executable",
// 2066747970
// "4D5A900003000000": "application/x-ms-dos-executable",
// "504B0304": "application/vnd.android.package-archive",
// application/x-executable
// application/graphql
// application/javascript
// application/json
// application/ld+json
// application/feed+json
// application/msword (.doc)
// application/sql
// application/vnd.api+json
// application/vnd.ms-excel (.xls)
// application/vnd.ms-powerpoint (.ppt)
// application/vnd.oasis.opendocument.text (.odt)
// application/vnd.openxmlformats-officedocument.presentationml.presentation (.pptx)
// application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.xlsx)
// application/vnd.openxmlformats-officedocument.wordprocessingml.document (.docx)
// application/x-www-form-urlencoded
// application/xml
// application/zstd (.zst)
// application/macbinary (.bin)
// audio/mpeg
// audio/ogg
// image/apng
// image/avif
// image/flif
// image/gif
// image/jxl
// image/x-mng
// multipart/form-data
// text/css
// text/csv
// text/php
// text/plain
// text/xml
}
async function verify() {
const file = document.getElementById("input_file").files[0];
console.log(file);
const magicnumber = await getMagicNumber(file);
console.log(magicnumber);
const numbers = Object.keys(magicjson)
for (let i = 0; i < numbers.length; i++) {
if (magicnumber.indexOf(numbers[i]) == 0) {
document.getElementById("type").innerHTML = magicjson[numbers[i]];
return magicjson[numbers[i]];
}
}
console.error("没找到！");
}
async function getMagicNumber(fileblob) {
const arraybuffer = await fileblob.arrayBuffer();
const dataview = new DataView(arraybuffer);
return dataview.getBigUint64().toString(16).toUpperCase();
}
document.getElementById("verify").onclick = verify;