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;
                }
            }
       })

需要获取所有文件数据类型，请查看最左侧《栏目》方法获取，已经整理了所有类型，并打包成了json文件。