JS/TS中如何通过单个输入框同时上传文件与文件夹？

浏览器原生的input[type="file"]有个硬性限制：一旦添加directory/webkitdirectory属性，就只能选择文件夹，无法再选单个文件；反过来，不带这些属性的输入框只能选文件，不能选文件夹。所以没法用单个原生输入框同时实现两者，得用变通方法：

方案：双隐藏输入框+统一触发按钮 #

核心思路是准备两个输入框，分别处理文件和文件夹选择，然后用一个自定义按钮触发选择逻辑，让用户看起来像是在同一个入口操作。

React代码示例 #

import { useState, useRef } from 'react';

function FileFolderUploader() {
  const [selectedFiles, setSelectedFiles] = useState([]);
  const fileInputRef = useRef(null);
  const folderInputRef = useRef(null);

  // 处理单个/多个文件选择
  const handleFileSelect = (e) => {
    const newFiles = Array.from(e.target.files);
    setSelectedFiles(prev => [...prev, ...newFiles]);
  };

  // 处理文件夹选择（自动包含文件夹内所有层级的文件）
  const handleFolderSelect = (e) => {
    const newFiles = Array.from(e.target.files);
    setSelectedFiles(prev => [...prev, ...newFiles]);
  };

  // 触发选择弹窗，让用户选择上传类型
  const triggerUpload = () => {
    const choice = window.confirm('选择上传文件还是文件夹？');
    if (choice) {
      fileInputRef.current?.click();
    } else {
      folderInputRef.current?.click();
    }
  };

  return (
    <div>
      {/* 隐藏的文件输入框 */}
      <input
        type="file"
        onChange={handleFileSelect}
        className="hidden"
        multiple
        ref={fileInputRef}
      />
      {/* 隐藏的文件夹输入框 */}
      <input
        type="file"
        onChange={handleFolderSelect}
        className="hidden"
        multiple
        directory=""
        webkitdirectory=""
        ref={folderInputRef}
      />
      {/* 统一交互按钮 */}
      <button onClick={triggerUpload}>选择文件/文件夹</button>
      
      {/* 展示已选文件列表 */}
      <div className="selected-files">
        <h3>已选文件：</h3>
        <ul>
          {selectedFiles.map((file, idx) => (
            <li key={idx}>{file.name}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default FileFolderUploader;

关键说明 #

• 两个输入框通过className="hidden"隐藏，用户只需要和统一按钮交互
• 点击按钮后，通过弹窗让用户选择上传类型，再触发对应输入框的选择事件
• 无论选文件还是文件夹，最终所有文件（包括文件夹内的文件）都会被收集到selectedFiles状态中，后续可以统一处理上传逻辑

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