HTML文件输入框accept属性不生效 无法限制仅上传Excel、CSV文件

input[type=file]的accept属性仅为文件选择弹窗提供默认的文件类型筛选规则，不属于强校验逻辑：用户可以在弹窗中手动切换为「所有文件」选项，选中任意后缀的文件，这是所有浏览器的原生设计，并非属性配置失效。另外你原有代码里accept属性的后缀值之间多了空格，部分低版本浏览器会因为空格无法正确识别筛选规则。

需要做两层限制：第一层保留accept属性优化选择体验，第二层在TS逻辑中增加强校验，拦截不符合格式要求的文件。

• 优化input标签的accept配置
  补充对应Excel类文件的标准MIME类型，去掉后缀间的多余空格，兼容更多浏览器版本：

<div mat-dialog-content class="p-24 pb-0 m-0" fusePerfectScrollbar>
    <div fxLayout="row" style="margin-top: 1rem;">
        <input 
          type="file" 
          accept=".xlsx,.xls,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,text/csv" 
          (change)="uploadFile($event)"
        >
    </div>
</div>

• 在TS上传逻辑中增加文件类型双重校验
  同时校验文件后缀与MIME类型，避免单一校验规则被绕过，校验不通过时直接终止流程并提示用户：

// 允许上传的文件后缀白名单
private readonly ALLOWED_EXTENSIONS = ['.xlsx', '.xls', '.csv'];
// 允许上传的MIME类型白名单，覆盖不同系统/浏览器的识别差异
private readonly ALLOWED_MIME_TYPES = [
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // xlsx格式标准MIME
  'application/vnd.ms-excel', // xls格式标准MIME
  'text/csv',
  'application/csv',
  'text/plain' // 部分环境下csv文件会被识别为text/plain类型
];

uploadFile(event): void {
  const file = event.target.files?.[0];
  if (!file) return;

  // 提取文件后缀并转为小写，兼容大小写后缀的场景
  const fileExt = '.' + file.name.split('.').pop()?.toLowerCase();
  const isExtValid = this.ALLOWED_EXTENSIONS.includes(fileExt);
  const isMimeValid = this.ALLOWED_MIME_TYPES.includes(file.type);

  if (!isExtValid || !isMimeValid) {
    // 替换为项目内的统一提示组件即可，例如MatSnackBar、NzMessage等
    alert('仅支持上传.xlsx、.xls、.csv格式的文件，请重新选择');
    // 清空input值，避免重复选择同一非法文件时不触发change事件
    event.target.value = '';
    return;
  }

  // 校验通过后再写入FormData
  this.formDataForm.append('file', file);
}

• 前端校验仅为用户体验优化，无法阻止恶意用户绕过前端直接构造请求上传非法文件，后端接口必须同步增加文件类型校验逻辑。
• 不要单独依赖MIME类型做判断：浏览器返回的文件MIME是根据本地文件后缀自动识别的，用户修改文件后缀即可伪造MIME值，必须配合后缀校验做兜底。

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