秒懂Javascript判定文件类型攻略：让文件上传更精准！

前端

2023-12-30 10:53:42

## 如何在 JavaScript 中判断文件类型

在 Web 开发中，文件上传是至关重要的功能。为了确保数据安全、用户体验和特定场景下的需求，我们需要限制上传文件的类型。在这篇文章中，我们将探索在 JavaScript 中判断文件类型的不同方法。

## 为什么需要判断文件类型？

判断文件类型对于以下原因至关重要：

1. 数据安全： 限制文件类型可以防止恶意文件（如病毒和木马）的上传，从而保护服务器和用户数据安全。

2. 用户体验： 确保用户上传的文件符合预期，避免用户上传错误格式的文件，带来不便。

3. 特殊场景： 在某些场景下，我们需要限制文件类型，例如：

简历投递： 企业网站上只允许上传 PDF 格式的简历。
论文提交： 学校网站上只允许上传 Docx 或 PDF 格式的论文。
图片上传： 电商网站上只允许上传 JPEG、PNG 等格式的图片。

## 如何判断文件类型？

在 JavaScript 中，我们可以通过以下几种方法判断文件类型：

1. 利用文件扩展名：

这是最简单直接的方法。通过获取文件的扩展名，我们可以判断文件类型。

const file = document.getElementById('file-input').files[0];
const fileName = file.name;
const fileExtension = fileName.split('.').pop();

if (fileExtension === 'pdf') {
  // 是 PDF 文件
} else if (fileExtension === 'docx') {
  // 是 Docx 文件
} else {
  // 其他类型文件
}

2. 利用文件签名（Magic Number）：

文件签名是文件头部几个字节的固定值。不同类型的文件有不同的文件签名。

const file = document.getElementById('file-input').files[0];
const reader = new FileReader();

reader.onload = function() {
  const fileContent = reader.result;
  const magicNumber = fileContent.slice(0, 4);

  if (magicNumber === '25504446') {
    // 是 PDF 文件
  } else if (magicNumber === '504b0304') {
    // 是 Docx 文件
  } else {
    // 其他类型文件
  }
};

reader.readAsArrayBuffer(file);

3. 利用第三方库：

如 File Type、Mime Type 等第三方库，可以轻松实现文件类型判断。

const file = document.getElementById('file-input').files[0];
const fileType = FileType.fromBlob(file);

if (fileType === 'pdf') {
  // 是 PDF 文件
} else if (fileType === 'docx') {
  // 是 Docx 文件
} else {
  // 其他类型文件
}