文章目录
- javscript获取文件真实后缀名
- 前言:错误的获取方法
- 1:通过javascript获取正确的后缀名
javscript获取文件真实后缀名
前言:错误的获取方法
过去获取文件的步骤是什么?
第一个想到的是根据文件的输入得到的文件,然后得到文件的属性,然后根据文件的属性得到类型,然后通过截取得到格式。
如:
javascript"><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
javascript_32">1:通过javascript获取正确的后缀名
要得到正确的后缀名,这里需要得到文件的十进制格式
然后将得到的十进制数据转换成十六进制,确定文件格式
一如既往,先得到type为file的input元素
javascript">let file = document.getElementById("fileid");
选择文件时,会触发change事件
javascript">file.addEventListener("change",function(){
})
然后获取文件
javascript">let file = file.files[0];
接下来你需要使用一个新的对象 FileReader
javascript">let read = new FileReader();
然后使用该对象的 readAsArrayBuffer方法
javascript"> file.addEventListener("change",function(){
let read = new FileReader();
read.readAsArrayBuffer(file.files[0])
read.onload = function(){
console.log(read.result)
}
})
readAsArrayBuffer读取的文件会存放在result属性中,但需要onload后加载成功后获取。
这时候,你会得到如下数据:
展开查看:
获取数组前四条数据:
javascript">let arr = (new Uint8Array(read.result)).subarray(0, 4);
将这些数据组合成字符串并转成16进制数据以便于比较:
javascript">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
接下来,您可以检查表格以确定文件类型:
javascript"> 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 | |
43 44 30 30 31 | iso |
75 73 74 61 72 | tar |
77 4F 46 46 | woff |
77 4F 46 32 | woff2 |