javscript Get the real suffix of the file

Preface ： Wrong acquisition method

What were the steps to get files in the past ？

The first thought is the file obtained according to the input of the file , Then get the attributes of the file , Then get the type according to the attributes of the file , Then get the format by intercepting .

Such as ：

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

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

By intercepting type Get the property value of png.

But the problem is , If I replace the file extension , The format is no longer correct .

When I change the file extension from png Change to jpg when , Output the following format

This format is wrong , Just change the suffix , But the original file type is actually png, But then we get the wrong output jpg

1： adopt javascript Get the correct suffix

To get the correct suffix , Here you need to get the decimal format of the file

Then convert the decimal data to hexadecimal , Determine the file format

As always, , First get type by file Of input Elements

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

When selecting a file , Will trigger change event

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

})

And then get the file

let file = file.files[0];

Next you need to use a new object FileReader

let read = new FileReader();

Then use the... Of the object readAsArrayBuffer Method

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

readAsArrayBuffer The read file will be stored in result Properties of the , But you need onload After loading successfully, get .

Now , You will get the following data ：

Expand to view ：

Get the first four data of the array ：

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

Combine these data into a string and turn it into 16 Hexadecimal data for comparison ：

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

obtain ：89504e47（msg Value ）

among ：

• png Hexadecimal ：89 50 4E 47
• jpg Hexadecimal ：FF D8 FF E0
• gif Hexadecimal ：47 49 46 38

Next , You can check the form to determine the file type ：

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

Need to get All file data types , Please check the leftmost side 《 The column 》 Method to get , All types have been sorted out , And packed it up json file .