前端（js）获取文件的头信息的16进制编码

正常我们做一些文件类型的判断辨别，低级别的鉴别就是根据文件扩展名判断。殊不知有些文件，有好事者喜欢直接修改扩展名，然后巧妙绕过扩展名过滤，轻则显示不正常，重则造成系统崩溃。

接下我们了解一下根据文件的头信息的16进制编码进行判断文件类型，即使好事者修改扩展名依然可以判断原本类型。（文件头信息对照表）

上代码：

1.html

<input type="file" name="excel" id="excel">

2.js(引用jq)

//关系表
$("#excel").change(function (e) {
    handleChange(e);
});
function handleChange(e) {
    // const reader = new FileReader();
    // reader.addEventListener('loadend', () => {
    //     console.log(reader.result);
    // });
    // reader.readAsArrayBuffer(e.target.files[0]);

    var file = e.target.files[0];
    let fileType = file.type.substring(0, 5).toLowerCase()
    if (file.name && file.name !== '/') {
        // 我的小米上如果取消了，name返回是'/'
        console.log('fileType: ' + fileType)
        console.log(file.name)
        let support = [
            '494433', // .MP3, 已验证
            'FFF1', // .aac, 已验证
            'FFF9', // .aac, 已验证
            '2321414D52', // .amr, 已验证
            '664C614300000022', // .fLaC, 已验证
            '667479704d344120', // .m4a/.m4r, 已验证，前方空8位
            '4d4d4d440000', //.mmf, 已验证
            ['52494646', '57415645666D7420'], // .wav, 已验证，中间有断层空8位
            '4F67675300020000000000000000', //.ogg, 已验证
            '3026B2758E66CF11A6D900AA0062CE6C' // .WMA, 已验证
        ]
        // console.log(file)
        let _this = this
        let fileReader = new FileReader()
        fileReader.onload = function () {
            let result = new Uint8Array(this.result)
            let array = Array.from(result).map(function (element) {
                if (element.toString(16).length === 1) {
                    return '0' + element.toString(16)
                } else {
                    return element.toString(16)
                }
            })
            console.log(array)
            if (array.length) {
                let endData = array.join('')
                console.log(endData)
                let status = []
                support.forEach(item => {
                    if (typeof item === 'object') {
                        let itemData = []
                        item.forEach((element, index) => {
                            if (endData.indexOf(element.toLowerCase()) > -1) {
                                itemData[index] = element
                            }
                        })
                        if (itemData.length === item.length) {
                            status = itemData
                        }
                    } else {
                        if (endData.indexOf(item.toLowerCase()) > -1) {
                            status[0] = item
                        }
                    }
                })
                if (status.length) {
                    console.log('ok')
                } else {
                    console.log('false')
                }
            } else {
                console.log('false')
            }
        }
        fileReader.readAsArrayBuffer(file.slice(0, 16));
    }
}

通过以上代码获取到对应的文件头信息的进行判断类型归属

其实在我们日常文件一个格式可能对应不同类型文件，如tif，它可以是影像数据还可以是地形数据，那我们怎样判断呢？

目前已知解决方案：读取tif渲染到canvas，然后取出颜色值通道值，进行判断。具体代码百度“

js获取图片颜色_dfibjt5177的博客-CSDN博客

”