前端文件上传识别文件类型的几种方法，快看你是哪个？

在我们的日常开发过程中，我们会经常接触到一些文件上传的事情，其中在前端这边识别识别文件类型的是非常常见的功能，例如来限制文件上传的类型，接下来我们来了解一下最常见的几种方式。

通过文件扩展名判断类型

最简单快捷的方法就是 hiyaJavaScript 获取文件名的扩展名，对比扩展名来判断文件类型，如下代码所示：

  
    
    
    
  
  
    
文件类型识别
    
    
文件类型

    
  

当然 JavaScript 这方面的代码你也可以这样子实现，看你需求：

document
  .getElementById("fileInput")
  .addEventListener("change", function (event) {
    const file = event.target.files[0];
    if (!file) {
      document.getElementById("fileType").textContent = "没有文件被选中";
      return;
    }

    let fileType = file.type;
    if (!fileType) {
      const fileNameParts = file.name.split(".");
      const extension = fileNameParts[fileNameParts.length - 1];
      if (extension === "md") {
        fileType = "text/markdown";
      }
    }

    document.getElementById("fileType").textContent = "文件类型: " + fileType;
  });

上传一个文件，文件的类型被输出出来了：

仅通过文件扩展名来判断类型存在安全和准确性风险，因为它可能被恶意用户篡改以上传危险文件，且不能可靠地反映文件的真实内容，同时还无法识别没有扩展名的文件。

通过 MIME 类型判断

当我们使用 HTML 的 标签时，可以通过文件的 type 属性获取 MIME 类型：

document
  .getElementById("fileInput")
  .addEventListener("change", function (event) {
    const file = event.target.files[0];
    if (!file) {
      document.getElementById("fileType").textContent = "没有文件被选中";
      return;
    }

    document.getElementById("fileType").textContent = "文件类型: " + file.type;
  });

这段代码为文件输入元素添加了一个 change 事件监听器。当用户选择文件后，会触发这个事件。事件处理函数会获取用户选中的文件，并显示它的 MIME 类型。

MIME（多用途互联网邮件扩展，Multi-purpose Internet Mail Extensions）最初是为了改进电子邮件中的文件传输而设计的，但它的使用范围已经扩展到互联网的其他领域。MIME 定义了一系列的数据类型和数据格式，用于在网络上交换数据。

但是 MIME 类型有时可能不准确或为空。

使用 FileReader 读取文件内容

FileReader 是 HTML5 提供的 API，可以用来读取文件的内容,通过读取文件内容的一部分，可以更准确地判断文件类型：

  
    
    
    
    
  
  
    
    
文件类型

    
  

在上面的代码中读取了文件的前四个字节来判断文件类型。它包含了用于标识文件格式的特定模式或“魔术数字”。

文件类型被正确输出。

HTML5 File API

使用 HTML5 File API 可以读取用户在浏览器中选择的文件的信息，包括文件类型。这个 API 提供了一个标准的方式来获取关于文件的信息，如文件名、大小以及 MIME 类型。

document
  .getElementById("fileInput")
  .addEventListener("change", function (event) {
    const file = event.target.files[0];
    if (!file) {
      document.getElementById("fileInfo").textContent = "没有选择文件";
      return;
    }

    const fileInfo = `文件名: ${file.name}
文件大小: ${file.size} 字节
文件类型: ${file.type}`;
    document.getElementById("fileInfo").innerHTML = fileInfo;
  });

最终输出效果如下图所示：

装 X 必备，WebAssembly

使用 WebAssembly (WASM) 对文件进行识别通常涉及到较为复杂的操作，因为你需要将文件处理逻辑编译为 WASM 模块，然后在 JavaScript 中调用这个模块来处理文件。

第一步，我们以 C 为例子，接下来我们编写一个 C 代码，如下：

#include 
#include 

// 检查 PNG
int is_png(const unsigned char *buffer) {
    const unsigned char png_signature[8] = {0x89, 'P', 'N', 'G', 0x0D, 0x0A, 0x1A, 0x0A};
    return memcmp(buffer, png_signature, 8) == 0;
}

// 检查 JPEG
int is_jpeg(const unsigned char *buffer) {
    return buffer[0] == 0xFF && buffer[1] == 0xD8 && buffer[2] == 0xFF;
}

// 检查 GIF
int is_gif(const unsigned char *buffer) {
    return strncmp((const char *)buffer, "GIF", 3) == 0;
}

// 检查 PDF
int is_pdf(const unsigned char *buffer) {
    return strncmp((const char *)buffer, "%PDF-", 5) == 0;
}

// 主函数，用于检测文件类型
EMSCRIPTEN_KEEPALIVE
int check_file_type(const unsigned char *buffer, int length) {
    if (is_pdf(buffer)) {
        return 1;
    } else if (is_png(buffer)) {
        return 2;
    } else if (is_jpeg(buffer)) {
        return 3;
    } else if (is_gif(buffer)) {
        return 4;
    }
    return 0; // 未知类型
}

在上面的这些代码中，通过比较输入流的前 8 个字节与这个序列来判断是否为某个文件。

代码编写完成之后，我们要在终端执行一行命令如下所示：

emcc index.c -s WASM=1 -o index.js -s EXPORTED_FUNCTIONS='["_check_file_type", "_malloc", "_free"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

最终会生成这两个文件：

这个时候我们就可以在我们前端中使用了，编写如下代码：

这样，我们就可以根据不同的 id 来返回不同的文件类型了：

通过以上步骤，我们实现了一个使用 WebAssembly 来识别文件类型并在浏览器控制台上输出结果的功能。

总结

除了这些之外，我们还可以使用第三方库 file-type 来实现文件类型检测，这里我们就不再进行 demo 演示了，感兴趣的可以去官方文档中进行查阅。

另外最近对脚手架的仓库代码进行了重构，之后会越来越规范，规模会越来越大，感兴趣的小伙伴可以加入来一起开发，春招没有项目的朋友也可以以此作为春招的项目：