在我们处理文件上传时候，通常情况下获取文件类型都是直接根据文件名后缀确定的，但是后缀名是可以随意修改的，比如界面要上传的是图片文件，如果客户端将一个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.fly63.com/tool/filetype/。识别结果包括：文件名称、文件大小、文件格式(十六进制)、文件格式(fileType)、文件后缀名、文件最后修改时间等。

如果你需要了解更多的文件头16进制相关信息，点击链接可了解更多：https://www.garykessler.net/library/file_sigs.html

链接: https://www.fly63.com/article/detial/10492