如何使用<input type="file">的accept属性过滤.tar.gz这类多扩展名文件？

原生<input type="file">的accept属性对.tar.gz这类多扩展名文件的支持并不稳定，不同浏览器的识别逻辑有差异，这里有两种可行的实现方案：

方案1：原生accept辅助 + JavaScript精确校验 #

先用accept属性做基础过滤，缩小用户可选文件范围，再通过JS校验文件名后缀，确保准确性：

1. 配置input标签的accept属性，覆盖相关类型：

<input type="file" id="fileUpload" accept=".tar.gz,.gz,.tar">

2. 添加JavaScript监听文件选择事件，做精确后缀校验：

document.getElementById('fileUpload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  // 定义允许的多扩展名和单扩展名列表
  const allowedExtensions = ['.tar.gz', '.tar.bz2', '.gz', '.tar'];
  // 检查文件名是否以允许的后缀结尾
  const isValid = allowedExtensions.some(ext => file.name.endsWith(ext));
  
  if (!isValid) {
    alert('仅支持上传.tar.gz、.tar.bz2、.gz、.tar类型的文件');
    // 重置input，清空错误选择的文件
    e.target.value = '';
  }
});

方案2：纯JavaScript前端校验 #

如果觉得原生accept的过滤效果不稳定，可以直接用JS做完整校验，不依赖accept属性：

<input type="file" id="fileUpload">

document.getElementById('fileUpload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  // 用正则匹配多扩展名，支持.tar.gz、.tar.bz2等格式
  const extensionRegex = /\.(tar\.gz|tar\.bz2|gz|tar)$/i;
  if (!extensionRegex.test(file.name)) {
    alert('仅支持上传.tar.gz、.tar.bz2、.gz、.tar类型的文件');
    e.target.value = '';
  }
});

重要提示 #

前端校验只是为了提升用户体验，绝对不能替代后端校验。恶意用户可以绕过前端限制上传任意文件，所以后端必须再次校验文件的后缀和实际内容（比如检查文件头、解析文件结构），确保上传文件的安全性和合法性。

内容的提问来源于stack exchange，提问作者polarise