使用webkitdirectory上传目录，能否在上传前过滤不需要的文件？

嘿，这个场景我之前刚好处理过！虽然webkitdirectory确实是非标准特性，但临时用的话，完全可以在前端就把那个不需要的大文件过滤掉，不用等上传浪费时间。下面是具体的实现思路和代码：

核心思路 #

当用户通过webkitdirectory选择文件夹后，浏览器会返回该文件夹下所有文件的完整列表（包括子文件夹里的文件），每个文件对象都带有webkitRelativePath属性——这个属性能帮我们精准定位文件在文件夹中的相对路径。我们可以利用这个属性，或者结合文件名、文件大小，在上传前直接把目标大文件排除掉，再把剩下的文件组装成FormData发送给服务器。

具体代码实现 #

HTML部分 #

先搭好文件夹选择的基础控件：

<input type="file" id="folderInput" webkitdirectory multiple>
<button id="uploadBtn">上传筛选后的文件</button>

JavaScript部分 #

接下来是事件监听和过滤逻辑，你可以根据自己的需求调整过滤规则：

const folderInput = document.getElementById('folderInput');
const uploadBtn = document.getElementById('uploadBtn');
let filteredFiles = [];

// 监听文件夹选择事件，先完成文件筛选
folderInput.addEventListener('change', (e) => {
  const allFiles = Array.from(e.target.files);
  
  // 这里根据你的实际需求写过滤规则，下面是几个常见示例
  filteredFiles = allFiles.filter(file => {
    // 示例1：按固定文件名排除（比如排除名为"large-archive.zip"的文件）
    // return file.name !== 'large-archive.zip';
    
    // 示例2：按相对路径排除（比如排除根目录下的big-file，或者子文件夹里的特定文件）
    return !file.webkitRelativePath.includes('big-file.mp4');
    
    // 示例3：按文件大小排除（比如排除大于100MB的文件，100MB = 100 * 1024 * 1024字节）
    // return file.size < 100 * 1024 * 1024;
  });
  
  console.log(`筛选后剩余${filteredFiles.length}个文件待上传`);
});

// 点击上传按钮，组装FormData并发送请求
uploadBtn.addEventListener('click', async () => {
  if (filteredFiles.length === 0) {
    alert('请先选择要上传的文件夹');
    return;
  }
  
  const formData = new FormData();
  filteredFiles.forEach(file => {
    // 保留文件的相对路径，方便服务器识别原文件夹结构
    formData.append('uploadFiles', file, file.webkitRelativePath);
  });
  
  try {
    const response = await fetch('/your-server-upload-endpoint', {
      method: 'POST',
      body: formData
    });
    
    response.ok ? alert('上传成功！') : alert('上传失败，请重试');
  } catch (error) {
    console.error('上传出错:', error);
    alert('上传过程中出现错误，请检查后重试');
  }
});

额外提醒 #

• 因为webkitdirectory是非标准属性，目前只有Chrome、Edge等Chromium系浏览器支持，Firefox和Safari的支持范围有限，这点你已经清楚，就不多啰嗦了。
• 如果大文件的位置不固定，比如可能在任意子文件夹里，可以用webkitRelativePath的包含关系来模糊匹配，比如return !file.webkitRelativePath.includes('/unwanted-folder/')。
• 过滤规则可以自由组合，比如同时判断文件名和大小，确保不会误删需要的文件。

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