JavaScript 检测上传文件类型

在 Web 开发中，经常需要使用 JavaScript 验证用户上传文件的类型，以确保安全性和应用功能的正常运行。

我们可以通过检查文件扩展名或 MIME 类型来实现文件类型判断。

方法一： 检查文件扩展名

该方法简单直接，但可靠性较低，因为用户可以轻易地更改文件扩展名。

function checkFileTypeByExtension(fileName, allowedExtensions) { 
  const fileExtension = fileName.split('.').pop().toLowerCase();
  return allowedExtensions.includes(fileExtension);
}

// 示例用法
const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
const fileName = 'example.jpg';

if (checkFileTypeByExtension(fileName, allowedExtensions)) {
  // 文件类型允许上传
} else {
  // 文件类型不允许上传
}

方法二： 检查文件 MIME 类型

该方法更加可靠，因为它直接检查文件的 MIME 类型，而不是依赖于文件扩展名。

function checkFileTypeByMimeType(file, allowedMimeTypes) {
  return allowedMimeTypes.includes(file.type);
}

// 示例用法
const allowedMimeTypes = ['image/jpeg', 'image/png'];
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  if (checkFileTypeByMimeType(file, allowedMimeTypes)) {
    // 文件类型允许上传
  } else {
    // 文件类型不允许上传
  }
});

需要注意的是，以上两种方法都只能在客户端进行初步验证。为了确保安全性，建议在服务器端进行更严格的文件类型验证。