前端(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博客

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值