在我们处理文件上传时候，通常情况下获取文件类型都是直接根据文件名后缀确定的，但是后缀名是可以随意修改的，比如界面要上传的是图片文件，如果客户端将一个exe文件改为gif后缀的文件，它照样可以上传上去。
为解决这样的问题，我们需要获取文件的真实类型，首先是将文件转换为字节流，然后获取字节流的前几位，并转换为16进制字符串，各种文件的文件头都是固定格式的。
常见的文件头:
很多类型的文件，其起始的几个字节的内容是固定的（或是有意填充，或是本就如此）。根据这几个字节的内容就可以确定文件类型。以下是各类文件的头：
- JPEG (jpg)，文件头：FFD8FFE1
- PNG (png)，文件头：89504E47
- GIF (gif)，文件头：47494638
- TIFF (tif)，文件头：49492A00
- Windows Bitmap (bmp)，文件头：424D
- CAD (dwg)，文件头：41433130
- Adobe Photoshop (psd)，文件头：38425053
- Rich Text Format (rtf)，文件头：7B5C727466
- XML (xml)，文件头：3C3F786D6C
- HTML (html)，文件头：68746D6C3E
- Email [thorough only] (eml)，文件头：44656C69766572792D646174653A
- Outlook Express (dbx)，文件头：CFAD12FEC5FD746F
- Outlook (pst)，文件头：2142444E
- MS Word/Excel (xls.or.doc)，文件头：D0CF11E0
- MS Access (mdb)，文件头：5374616E64617264204A
- WordPerfect (wpd)，文件头：FF575043
- Postscript (eps.or.ps)，文件头：252150532D41646F6265
- Adobe Acrobat (pdf)，文件头：255044462D312E
- Quicken (qdf)，文件头：AC9EBD8F
- Windows Password (pwl)，文件头：E3828596
- ZIP Archive (zip)，文件头：504B0304
- RAR Archive (rar)，文件头：52617221
- Wave (wav)，文件头：57415645
- AVI (avi)，文件头：41564920
- Real Audio (ram)，文件头：2E7261FD
- Real Media (rm)，文件头：2E524D46
- MPEG (mpg)，文件头：000001BA
- MPEG (mpg)，文件头：000001B3
- Quicktime (mov)，文件头：6D6F6F76
- Windows Media (asf)，文件头：3026B2758E66CF11
- MIDI (mid)，文件头：4D546864
Js代码的实现：
const mime=[//type:类型，h：16字节标识【根据需要，自行添加】
{type:'image/png',h:'89504e47'},
{type:'image/gif',h:'47494638'},
{type:'image/jpeg',h:'ffd8ffe0,ffd8ffe1,ffd8ffe2,ffd8ffe3,ffd8ffe8'},
{type:'image/webp',h:'524946461c'},
{type:'Windows Bitmap/bmp',h:'424D'},
{type:'TIFF/tif',h:'49492A00'},
{type:'CAD/dwg',h:'41433130'},
{type:'Adobe Photoshop/psd',h:'384250'},
]
function check(header){
for(let i in mime){
let arr = mime[i].h.split(',');
let offset = (mime[i].offset || -1)+1;//偏移量
for(let j in arr){
let byte=arr[j].toLowerCase().replace(/\s+/g,"");
if(header.indexOf(byte)==offset){
return mime[i].type;
}
}
}
return 'unknown';
}
function loadMime(file,callback){
let blob = file.slice(0, 128);//仅获取前128字节。
let reader = new FileReader();
reader.onloadend = function(e) {
let arr = (new Uint8Array(e.target.result)).subarray(0, 200);
let header = "";
for(let i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
let type=check(header);
callback(type);
}
reader.readAsArrayBuffer(blob);
}使用：
<input type="file" id="file"/>
<script>
document.getElementById('file').addEventListener('change',function(e){
var file=e.target.files[0]
loadMime(file, function(res){
console.log(res);
});
})
</script>文件格式识别工具
根据上述的代码，fly63前端网整理了一套在线文件格式识别工具，点击链接进入：http://www.shenqiku.cn/tool/filetype/。识别结果包括：文件名称、文件大小、文件格式(十六进制)、文件格式(fileType)、文件后缀名、文件最后修改时间等。
如果你需要了解更多的文件头16进制相关信息，点击链接可了解更多：https://www.garykessler.net/library/file_sigs.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！