QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 6770|回复: 0

[HTML/CSS/JS] 如何判断没有后缀的文件类型

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1323 小时
   最后登录 : 2026-3-2

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2022-1-17 09:41:46 | 显示全部楼层 |阅读模式
       正常情况下,文件都有后缀名,例如:xxx.gif, xxxx.avi。但也存在文件后缀名去掉的情况,虽然如此,去掉文件的后缀名,并不会影响文件本身的内容。所以在文件的数据中,有其他的方式能够标识出文件的类型。
0 X2 B6 t9 X' A/ g! q       在编程中,把标识文件格式的常量称为 Magic Number, 原名叫做:File Signatures(文件签名)。
) \1 z7 v8 V4 t! {: ]Magic Number 在编程中有以下三类使用:
& c. g& g' a8 Z. P( ?# I
  • 无法解释其意义的唯一值或者在程序中多次被引用但又可被命名常数所替代的值。
  • 用来识别文本类型的一个常量数值或字符。
  • 不易被误解为其他意义的特有值,如全局唯一标识符。5 f9 E# u* V* [/ p
利用 Magic Number 判断文件类型
$ C8 f, H* l9 k1 h, R1、请求获取文件数据,并转成 Array Buffer
6 ?% b. P# N/ Q
function loadFile(url) {
 return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest()
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4) {
       resolve(xhr)
     }
   }
   xhr.onerror = reject
   xhr.open('GET', url, true)
   xhr.responseType = 'arraybuffer'
   xhr.send('')
 })
}
2、 buffer 转 16 进制字符串! f! a2 b" x; \( U. p1 m' g2 S4 J$ D" T
function buf2hex(buffer) {
  return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('')
}
3、根据 16 进制字符串获取文件头,判断文件类型. w8 O  E& y7 p
function getFileType(url) {
  loadFile(url).then(xhr => {
    const hex = buf2hex(xhr.response)
    console.log(hex)
    // todo....
  })
}
测试:
# x9 i2 o! M! S( e/ C# v( i 1.jpg 0 W: J3 G* x$ y6 a! D9 B1 z8 J
常见文件头:3 }. W; P5 g  n4 W& O8 L# c
2.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2026-3-19 19:14

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表