readBuffer 函数
在获取文件对象后,我们可以通过 FileReader API 来读取文件的内容。因为我们并不需要读取文件的完整信息,所以阿宝哥封装了一个 readBuffer
函数,用于读取文件中指定范围的二进制数据。
function readBuffer(file, start = 0, end = 2) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { resolve(reader.result); }; reader.onerror = reject; reader.readAsArrayBuffer(file.slice(start, end)); }); }
检测 PNG 图片类型
对于 PNG 类型的图片来说,该文件的前 8 个字节是 0x89 50 4E 47 0D 0A 1A 0A。因此,我们在检测已选择的文件是否为 PNG 类型的图片时,只需要读取前 8 个字节的数据,并逐一判断每个字节的内容是否一致。基于前面定义的 readBuffer
和 check
函数,我们就可以实现检测 PNG 图片的功能:
代码
HTML 代码
<div> 选择文件:<input type="file" id="inputFile" accept="image/*" οnchange="handleChange(event)" /> <p id="realFileType"></p> </div>
JS 代码
// 逐字节比对工具函数 function check(headers) { return (buffers, options = { offset: 0 }) => headers.every( (header, index) => header === buffers[options.offset + index] ); } // 检测 PNG 函数 const isPNG = check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); const realFileElement = document.querySelector("#realFileType"); async function handleChange(event) { const file = event.target.files[0]; const buffers = await readBuffer(file, 0, 8); const uint8Array = new Uint8Array(buffers); realFileElement.innerText = `${file.name}文件的类型是:${ isPNG(uint8Array) ? "image/png" : file.type }`; }
检测 JEPG 类型 isJPEG
函数:
const isJPEG = check([0xff, 0xd8, 0xff])