如何使用HTML file input上传文件夹时限制特定类型文件

原生file标签的文件夹选择模式不会自动按类型过滤文件，需要先配置文件夹选择属性，再通过JS二次筛选符合要求的文本文件。

第一步：配置文件选择框 #

给input标签添加webkitdirectory属性开启文件夹选择能力，同时添加accept属性做选择弹窗的初步类型提示：

<input type="file" id="folderUpload" webkitdirectory multiple accept=".txt">

注意：accept属性仅做选择端的提示，不会自动过滤文件夹内的非txt文件，必须配合JS做校验

第二步：JS筛选目标文件 #

监听input的change事件，拿到选中文件夹下的全量文件列表后，过滤出所有后缀为.txt的文本文件，再执行上传逻辑：

const uploadInput = document.getElementById('folderUpload');
uploadInput.addEventListener('change', (e) => {
  // 把原生FileList转成数组方便遍历处理
  const allFiles = Array.from(e.target.files);
  // 过滤txt文件，兼容.TXT等大写后缀场景
  const txtFileList = allFiles.filter(file => {
    const ext = file.name.split('.').pop()?.toLowerCase();
    return ext === 'txt';
  });

  // 无符合条件文件时直接提示
  if (txtFileList.length === 0) {
    alert('所选文件夹内未找到txt格式文本文件');
    uploadInput.value = ''; // 清空选择状态
    return;
  }

  // 组装上传数据
  const uploadData = new FormData();
  txtFileList.forEach(file => {
    // 携带webkitRelativePath参数可保留文件在原文件夹内的相对路径，方便后端还原目录结构
    uploadData.append('txtFiles', file, file.webkitRelativePath);
  });

  // 此处写你的上传请求逻辑即可，比如用fetch/axios提交uploadData到后端接口
})

注意事项 #

• 不要依赖File对象的type属性判断文件类型：本地文件的MIME识别受系统环境影响误差极大，后缀判断的准确率更高
• 后端必须做二次校验：前端过滤可以被轻易绕过，后端接收文件时需要再次校验文件后缀、文件内容，防止非法文件上传
• 如果需要支持其他文本类后缀（比如.md、.csv），直接修改过滤逻辑里的后缀判断条件即可

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