如何获取用 html <input type=\"file\" accept=\"image/*\"/> 加载的文件的实际 MIME 类型答案

【问题标题】：How to get actual MIME type of file loaded with html <input type="file" accept="image/*"/>如何获取用 html <input type=\"file\" accept=\"image/*\"/> 加载的文件的实际 MIME 类型
【发布时间】：2023-02-21 11:37:52
【问题描述】：

我正在尝试使用 <input type="file" accept="image/* onchange="handler()"/> 确定网页中加载的文件的实际 MIME 类型

我想支持用户浏览任何图像文件，但我需要知道将其上传到 REST API 的实际 MIME 类型。

我想我可以加载一个文件扩展名映射表，并有一个 Javascript 函数来根据文件的文件扩展名确定 MIME 类型。我只是希望浏览器可能已经知道这一点，并且它在 DOM 中以某种方式可用。

【问题讨论】：

Mime 类型是有根据的猜测。唯一永远正确的是application/octet-stream。最好的猜测通常来自检查文件内容，尤其是前几个字节（“幻数”）。典型的猜测来自检查文件扩展名。有许多 javascript 库可以完成后者。
这回答了你的问题了吗？ How to check file MIME type with JavaScript before upload?
@Ouroborus 我认为浏览器必须知道 MIME 类型才能呈现它对我选择的任何图像文件类型成功呈现的文件。看起来你分享的其他信息是正确的，我将把它添加到我的代码中以测试它是否像我预期的那样工作。

标签： html dom mime-types

【解决方案1】：

function getMimeType(file) {
  const reader = new FileReader();
  reader.onloadend = function() {
    const arr = (new Uint8Array(reader.result)).subarray(0, 4);
    let header = "";
    for(let i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    switch (header) {
      case "89504e47":
        return "image/png";
      case "47494638":
        return "image/gif";
      case "25504446":
        return "application/pdf";
      case "ffd8ffe0":
      case "ffd8ffe1":
      case "ffd8ffe2":
        return "image/jpeg";
      default:
        return "unknown";
    }
  };
  reader.readAsArrayBuffer(file);
}

此函数将文件对象作为参数并返回文件的实际 MIME 类型。它使用 FileReader 对象读取文件的内容，然后检查文件的前几个字节以确定其实际的 MIME 类型。不同的文件格式在文件开头有不同的“幻数”，可以用来识别文件格式。

在示例代码中，我们包含了一些常见的文件格式及其相应的幻数。您可以根据需要向此函数添加更多格式和幻数。

【讨论】：