readBuffer 函数

最新推荐文章于 2025-09-27 20:10:31 发布

翻译最新推荐文章于 2025-09-27 20:10:31 发布 · 343 阅读

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了如何通过封装readBuffer函数读取文件的指定二进制数据，以及如何利用这个函数检测上传文件是否为PNG或JPEG类型，通过逐字节比对文件头信息。

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])