如何在React中用同一个input元素实现文件与文件夹上传？

单个<input type="file">无法同时支持单个文件选择和文件夹选择——因为webkitdirectory（或标准属性directory）会强制浏览器将文件选择器限定为文件夹模式，这是浏览器的原生行为限制。以下是两种可行的替代实现方案：

方案1：双隐藏Input+触发按钮（推荐，兼容性好） #

创建两个独立的隐藏Input，分别对应文件选择和文件夹选择逻辑，用可见按钮触发它们的点击事件：

import { useRef } from 'react';

function FileFolderUploader() {
  const fileInputRef = useRef(null);
  const folderInputRef = useRef(null);

  const handleFiles = (e) => {
    const selectedFiles = Array.from(e.target.files);
    // 处理单个/多个文件的业务逻辑
    console.log("选中的文件：", selectedFiles);
  };

  const handleFolderFiles = (e) => {
    const selectedFiles = Array.from(e.target.files);
    // 处理文件夹下所有文件的业务逻辑（会递归返回文件夹内所有文件）
    console.log("选中文件夹内的文件：", selectedFiles);
  };

  return (
    <div className="upload-controls">
      <button onClick={() => fileInputRef.current?.click()}>选择文件</button>
      <button onClick={() => folderInputRef.current?.click()}>选择文件夹</button>

      {/* 文件选择Input */}
      <input
        ref={fileInputRef}
        type="file"
        multiple
        className="hidden"
        onChange={handleFiles}
      />
      {/* 文件夹选择Input */}
      <input
        ref={folderInputRef}
        type="file"
        multiple
        directory=""
        webkitdirectory=""
        className="hidden"
        onChange={handleFolderFiles}
      />
    </div>
  );
}

方案2：动态切换单个Input的属性（兼容性需验证） #

通过按钮点击动态修改Input的directory/webkitdirectory属性，切换选择模式：

import { useRef } from 'react';

function DynamicUploader() {
  const inputRef = useRef(null);

  const handleSelect = (e) => {
    const selectedFiles = Array.from(e.target.files);
    const isFolderMode = !!inputRef.current?.hasAttribute('webkitdirectory');
    if (isFolderMode) {
      console.log("选中文件夹内的文件：", selectedFiles);
    } else {
      console.log("选中的文件：", selectedFiles);
    }
  };

  const triggerFileMode = () => {
    const input = inputRef.current;
    if (!input) return;
    input.removeAttribute('directory');
    input.removeAttribute('webkitdirectory');
    input.click();
  };

  const triggerFolderMode = () => {
    const input = inputRef.current;
    if (!input) return;
    input.setAttribute('directory', '');
    input.setAttribute('webkitdirectory', '');
    input.click();
  };

  return (
    <div className="upload-controls">
      <button onClick={triggerFileMode}>选择文件</button>
      <button onClick={triggerFolderMode}>选择文件夹</button>

      <input
        ref={inputRef}
        type="file"
        multiple
        className="hidden"
        onChange={handleSelect}
      />
    </div>
  );
}

注意事项 #

• 同时添加directory和webkitdirectory属性可以提升多浏览器兼容性（覆盖Chrome/Firefox/Edge等）
• 方案2在部分旧版浏览器可能存在行为不一致，优先推荐方案1，逻辑更稳定清晰

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