前端如何根据文件后缀自动识别文件信息

前端判断文件类型并显示相关信息通常依赖于HTML5提供的File API。当你让用户选择文件时，浏览器会在后台处理文件上传并将文件信息（如文件名、大小、类型等）传递给前端。以下是基本步骤：

1. 使用`input[type=file]`元素：

   <input id="fileInput" type="file" onchange="handleFileSelect(this)">

2. 创建处理函数，获取选中的文件：

   function handleFileSelect(input) {
     const file = input.files[0];
     if (file) {
       console.log(file.type); // 输出文件类型，如 "image/jpeg"
     }
   }

3. 根据文件类型做进一步的操作，例如显示预览图、判断是否支持某种格式等：

   const mimeTypeToAction = {
     'image/*': showImagePreview,
     'text/plain': displayTextContent,
     // 添加更多文件类型映射...
   };

   function handleFileType(file) {
     const contentType = file.type;
     if (mimeTypeToAction.hasOwnProperty(contentType)) {
       mimeTypeToAction[contentType](file);
     } else {
       alert('无法识别此文件类型');
     }
   }

   // 实现对应的函数
   function showImagePreview(file) {
     // 图片预览部分的代码...
   }
   function displayTextContent(file) {
     // 文本内容处理部分的代码...
   }

4. **注意**: 文件类型识别并不总是准确无误的，因为有些文件可能会伪装成其他类型的文件。因此，在实际应用中，最好还是在服务器端对文件进行更严格的验证。