如何从HTML文件输入读取文件的前N个字节？

核心解决方案：Blob.slice() + FileReader #

使用Blob.slice()方法可以创建仅包含文件前N字节的子Blob，再配合FileReader读取这个子Blob即可实现需求——浏览器不会加载完整文件，只会读取指定的切片部分，完全避免大文件无效上传的带宽浪费。

原理说明 #

Blob是浏览器对文件的引用对象，slice()方法仅创建一个指向原文件特定区间的逻辑子Blob，不会提前加载完整文件内容。当通过FileReader读取该切片时，浏览器才会从底层文件系统（本地文件）或请求对应字节范围（HTTP上传场景，需服务器支持范围请求）获取数据，仅读取所需的前N字节。

针对PDF魔术数字的验证代码示例 #

function checkPdfMagicNumber(file) {
  // 截取文件前5字节的切片
  const blobSlice = file.slice(0, 5);
  const reader = new FileReader();

  reader.onload = function(e) {
    const arrayBuffer = e.target.result;
    const uint8Array = new Uint8Array(arrayBuffer);
    // PDF魔术数字对应的十进制值：25 50 44 46 2D → %PDF-
    const pdfMagicNumber = [37, 80, 68, 70, 45];
    
    // 逐字节对比验证
    const isPdf = uint8Array.every((byte, index) => byte === pdfMagicNumber[index]);
    
    if (isPdf) {
      console.log("文件为合法PDF，可执行完整上传");
      // 此处调用上传完整文件的逻辑
      // uploadFullFile(file);
    } else {
      console.log("文件不是PDF，终止上传流程");
    }
  };

  reader.onerror = function() {
    console.error("读取文件切片失败");
  };

  reader.readAsArrayBuffer(blobSlice);
}

// 绑定文件上传控件使用
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  const targetFile = e.target.files[0];
  if (targetFile) {
    checkPdfMagicNumber(targetFile);
  }
});

通用读取前N字节的工具函数 #

function readFirstNBytes(file, byteCount) {
  return new Promise((resolve, reject) => {
    if (byteCount <= 0) {
      reject(new Error("需读取的字节数必须大于0"));
      return;
    }
    const blobSlice = file.slice(0, byteCount);
    const reader = new FileReader();

    reader.onload = (e) => {
      resolve(new Uint8Array(e.target.result));
    };

    reader.onerror = () => {
      reject(new Error("读取文件切片失败"));
    };

    reader.readAsArrayBuffer(blobSlice);
  });
}

// 使用示例
// readFirstNBytes(targetFile, 10)
//   .then(first10Bytes => console.log("前10字节数据：", first10Bytes))
//   .catch(err => console.error(err));

关于Blob.slice()的疑问解答 #

Blob.slice()不会预先加载完整文件，它只是创建一个指向原文件指定区间的引用。只有当你通过FileReader或其他API读取该切片时，浏览器才会请求对应范围的字节数据，完全符合“仅读取前N字节”的需求。

内容的提问来源于stack exchange，提问作者RedStoneMatt