HTML input type=file文件选择弹窗默认显示所有文件的设置咨询

问题原因 #

你遇到的现象是Windows系统下浏览器调用原生文件选择器的默认行为：浏览器会按accept属性中列出的MIME类型顺序生成分组筛选项，默认选中第一个分组，你原有代码中accept第一个值为xls对应的MIME类型，因此弹窗打开时默认仅显示xls文件。

解决方案 #

方案1：前端校验替代accept过滤（兼容性最好，推荐） #

直接将accept设置为允许所有文件，文件选择器打开时默认就会选中「所有文件」选项，选完文件后在上传回调中手动校验格式，不符合要求直接拦截。
示例代码：

<input 
  type="file" 
  name="file" 
  accept="*" 
  onChange={changeHandler} 
  ref={fileInputRef} 
/>

配套格式校验逻辑：

const changeHandler = (e) => {
  const selectFile = e.target.files[0]
  if (!selectFile) return
  // 校验文件扩展名
  const allowedSuffix = ['.xls', '.xlsx', '.csv']
  const fileSuffix = selectFile.name.slice(selectFile.name.lastIndexOf('.')).toLowerCase()
  if (!allowedSuffix.includes(fileSuffix)) {
    alert('仅支持上传xls、xlsx、csv格式文件')
    e.target.value = '' // 清空已选文件
    return
  }
  // 后续正常上传逻辑
}

方案2：调整accept属性顺序保留筛选功能 #

如果需要保留文件选择器的格式筛选能力，只需要把代表所有文件的*/*放在accept属性的最开头，浏览器就会把「所有文件」作为第一个筛选项，默认选中。同时建议补充对应文件扩展名，提升不同浏览器的兼容性：

<input 
  type="file" 
  name="file" 
  accept="*/*,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv,.xls,.xlsx,.csv" 
  onChange={changeHandler} 
  ref={fileInputRef} 
/>

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