javscript获取文件真实后缀名

javscript获取文件真实后缀名

前言：错误的获取方法

过去获取文件的步骤是什么？

第一个想到的是根据文件的输入得到的文件，然后得到文件的属性，然后根据文件的属性得到类型，然后通过截取得到格式。

如：

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

 let file = document.getElementById("fileid");
 file.addEventListener("change",function(){
       console.log(file.files[0])
 })

通过截取type的属性值获取到png。

但是问题来了，如果我替换文件扩展名，格式就不再正确了。

当我将文件扩展名从 png 更改为 jpg 时，输出了以下格式

这个格式是错误的，只是修改后缀名，但是原来的文件类型其实是png，但是这时候我们得到错误的输出jpg

1：通过javascript获取正确的后缀名

要得到正确的后缀名，这里需要得到文件的十进制格式

然后将得到的十进制数据转换成十六进制，确定文件格式

一如既往，先得到type为file的input元素

let file = document.getElementById("fileid");

选择文件时，会触发change事件

file.addEventListener("change",function(){

})

然后获取文件

let file = file.files[0];

接下来你需要使用一个新的对象 FileReader

let read = new FileReader();

然后使用该对象的 readAsArrayBuffer方法

        file.addEventListener("change",function(){
            let read = new FileReader();
            read.readAsArrayBuffer(file.files[0])
            read.onload = function(){
                console.log(read.result)
            }
       })

readAsArrayBuffer读取的文件会存放在result属性中，但需要onload后加载成功后获取。

这时候，你会得到如下数据：

展开查看：

获取数组前四条数据：

let arr = (new Uint8Array(read.result)).subarray(0, 4);

将这些数据组合成字符串并转成16进制数据以便于比较：

for(let i = 0;i<arr.length;i++){
    msg+=arr[i].toString(16)
}

得到：89504e47（msg的值）

其中：

• png十六进制：89 50 4E 47
• jpg十六进制：FF D8 FF E0
• gif十六进制：47 49 46 38

接下来，您可以检查表格以确定文件类型：

        let file = document.getElementById("fileid");
        file.addEventListener("change",function(){
            let read = new FileReader();
            read.readAsArrayBuffer(file.files[0])
            read.onload = function(){
                let arr = (new Uint8Array(read.result)).subarray(0, 4);
                let msg = "";
                for(let i = 0;i<arr.length;i++){
                    msg+=arr[i].toString(16)
                }
                switch(msg){
                    case '89504e47':
                        console.log("png");
                        break;
                    case 'ffd8ffe0':
                        console.log("jpg");
                        break;
                    case '47494638':
                        console.log("gif");
                        break;
                }
            }
       })

部分文件数据类型如下：

签名	内容
00 00 01 00	ico
47 49 46 38 37 61	gif
FF D8 FF E0	jpg
52 61 72 21 1A 07	rar
89 50 4E 47 0D 0A 1A 0A	png
25 21 50 53	ps
25 50 44 46 2D	pdf
43 44 30 30 31	iso
75 73 74 61 72	tar
77 4F 46 46	woff
77 4F 46 32	woff2