JavaScript 文件类型识别与状态图片返回系统

JavaScript 文件类型识别与状态图片返回系统

在前端开发中，根据文件类型展示不同状态和图片是一个常见需求。本文将从基础实现到高级优化，全面解析如何构建一个高效、可扩展的文件类型识别系统，并根据类型返回对应的状态信息和预览图片。

一、文件类型识别基础

1. 文件类型分类

常见文件类型可分为以下几类：

• 图片：JPG、PNG、GIF、SVG、WebP 等
• 文档：PDF、Word、Excel、PowerPoint 等
• 视频：MP4、WebM、AVI 等
• 音频：MP3、WAV、OGG 等
• 压缩包：ZIP、RAR、7Z 等
• 代码文件：JS、CSS、HTML、Python 等
• 其他：未知类型或特殊格式

2. 识别文件类型的方法

• 扩展名判断：通过文件名后缀识别（最常用）
• MIME 类型：通过 File.type 或 HTTP 响应头获取
• 文件内容探测：读取文件头部字节特征（更准确但复杂）

二、基础实现方案

1. 通过扩展名识别文件类型

// 文件类型映射表
const FILE_TYPE_MAPPING = {
   
   
  // 图片
  'jpg': 'image', 'jpeg': 'image', 'png': 'image', 
  'gif': 'image', 'svg': 'image', 'webp': 'image',
  
  // 文档
  'pdf': 'document', 'doc': 'document', 'docx': 'document',
  'xls': 'document', 'xlsx': 'document', 'ppt': 'document',
  'pptx': 'document', 'txt': 'document',
  
  // 视频
  'mp4': 'video', 'webm': 'video', 'avi': 'video', 'mov': 'video',
  
  // 音频
  'mp3': 'audio', 'wav': 'audio', 'ogg': 'audio',
  
  // 压缩包
  'zip': 'archive', 'rar': 'archive', '7z': 'archive',
  
  // 代码文件
  'js': 'code', 'css': 'code', 'html': 'code', 
  'py': 'code', 'java': 'code', 'cpp': 'code'
};

// 根据文件名获取文件类型
function getFileType(filename) {
   
   
  if (!filename) return 'unknown';
  
  // 获取扩展名（小写）
  const ext = filename.split('.').pop().toLowerCase();
  
  // 从映射表中查找类型
  return FILE_TYPE_MAPPING[ext] || 'unknown';
}

// 根据文件类型获取状态和图片
function getFileStatusAndImage(fileType) {
   
   
  const statusMap = {
   
   
    'image': {
   
    status: '预览', icon: 'image-icon.png' },
    'document': {
   
    status: '文档', icon: 'document-icon.png' },
    'video': {
   
    status: '视频', icon: 'video-icon.png' },
    'audio': {
   
    status: '音频', icon: 'audio-icon.png' },
    'archive': {
   
    status: '压缩包', icon: 'archive-icon.png' },
    'code': {
   
    status: '代码文件', icon: 'code-icon.png' },
    'unknown': {
   
    status: '未知', icon: 'unknown-icon.png' }
  };
  
  return statusMap[fileType];
}

// 示例用法
const filename = 'example.jpg';
const fileType = getFileType(filename);
const {
   
    status, icon } = getFileStatusAndImage(fileType);

console.log(`文件: ${
     
     filename}`);
console.log(`类型: ${
     
     fileType}`);
console.log(`状态: ${
     
     status}`);
console.log(`图标: ${
     
     icon}`);

三、高级文件类型识别方法

1. 结合 MIME 类型识别

// 扩展文件类型映射表，包含 MIME 类型
const MIME_TYPE_MAPPING = {
   
   
  'image/jpeg': 'image',
  'image/png': 'image',
  'image/gif': 'image',
  'application/pdf': 'document',
  'application/msword': 'document',
  'video/mp4': 'video',
  'audio/mpeg': 'audio',
  'application/zip': 'archive',
  'text/plain': 'document',
  'text/javascript': 'code',
  'text/css': 'code',
  'text/html': 'code'
};

// 增强型文件类型识别函数
function getEnhancedFileType(file) {
   
   
  // 优先使用 MIME 类型
  if (file.type && MIME_TYPE_MAPPING[file.type]) {
   
   
    return MIME_TYPE_MAPPING[file.type];
  }
  
  // 回退到扩展名识别
  return getFileType(file.name);
}

// 示例：处理 File 对象
function handleFile(file) {
   
   
  const fileType = getEnhancedFileType(file);
  const {
   
    status, icon } = getFileStatusAndImage(fileType);
  
  console.log(`文件: ${
     
     file.name}`);
  console.log(`MIME 类型: ${
     
     file.type}`);
  console.log(`识别类型: ${
     
     fileType}`);
  console.log(`状态: ${
     
     status}`);
  console.log(`图标: ${
     
     icon}`);
}

2. 文件内容探测（Magic Number）

对于没有扩展名或 MIME 类型不可靠的文件，可以通过读取文件头部字节特征识别：

// 文件头部特征映射表
const MAGIC_NUMBER_MAPPING = [
  {
   
    signature: '89504E47', type: 'image/png' },
  {
   
    signature: '47494638', type: 'image/gif' },
  {
   
    signature: 'FFD8FF', type: 'image/jpeg' },
  {
   
    signature: '25504446', type: 'application/pdf' },
  {
   
    signature: '504B0304', type: 'application/zip' }
];

// 异步读取文件头部字节
async function detectFileTypeByContent(file) {
   
   
  const reader = new FileReader();
  
  return new Promise((resolve) => {
   
   
    reader.onload = (e) => {
   
   
      const buffer = e.target.result;
      const bytes = new Uint8Array(buffer);
      const hex = Array.from(bytes)
        .map(byte => byte.toString(16).padStart(2, '0'))
        .