JavaScript 读取ArrayBuffer中的文件头信息

要读取ArrayBuffer中的文件头信息，可以使用DataView对象。以下是一个示例代码：

// 从File对象中获取ArrayBuffer
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = () => {
  const arrayBuffer = reader.result;

  // 使用DataView读取文件头信息
  const dataView = new DataView(arrayBuffer);
  const fileType = dataView.getUint8(0);
  const fileExtension = getFileExtension(fileType);

  console.log(`文件类型：${fileExtension}`);
};
reader.readAsArrayBuffer(file);

// 根据文件类型获取文件扩展名
function getFileExtension(fileType) {
  switch (fileType) {
    case 0xFF:
      return 'jpg';
    case 0x89:
      return 'png';
    case 0x47:
      return 'gif';
    case 0x49:
    case 0x4D:
      return 'tiff';
    case 0x52:
      if (dataView.getUint8(1) === 0x49 && dataView.getUint8(2) === 0x46 && dataView.getUint8(3) === 0x46) {
        return 'webp';
      }
      break;
    case 0x00:
    case 0x01:
    case 0x02:
    case 0x03:
    case 0x04:
    case 0x05:
    case 0x06:
    case 0x07:
    case 0x08:
    case 0x09:
    case 0x0A:
    case 0x0B:
    case 0x0C:
    case 0x0D:
    case 0x0E:
    case 0x0F:
      return 'ico';
  }
  return '';
}

上述代码中，我们首先使用FileReader对象从File对象中获取ArrayBuffer。然后，我们使用DataView对象读取ArrayBuffer中的第一个字节，这个字节存储了文件类型的信息。最后，我们使用getFileExtension函数根据文件类型获取文件扩展名。getFileExtension函数使用了一些常见的文件类型和对应的文件扩展名进行判断。