js实现文件目录选择

使用 <input type="file"> 实现文件选择

通过 HTML 原生文件输入框实现单个或多个文件选择：

<input type="file" id="fileInput" multiple>  
<script>  
  document.getElementById('fileInput').addEventListener('change', (event) => {  
    const files = event.target.files;  
    console.log('Selected files:', files);  
  });  
</script>  

• multiple 属性允许选择多个文件。
• 通过 event.target.files 获取选择的文件列表（FileList 对象）。

使用 webkitdirectory 实现目录选择

仅适用于 Chrome/Edge 等基于 Chromium 的浏览器，允许选择整个目录：

<input type="file" id="dirInput" webkitdirectory>  
<script>  
  document.getElementById('dirInput').addEventListener('change', (event) => {  
    const files = event.target.files;  
    console.log('Directory files:', files);  
  });  
</script>  

• 选择的文件列表包含目录内所有文件的层级路径（通过 File.webkitRelativePath 获取）。

使用第三方库（如 dropzone.js）

适用于需要拖放上传或更复杂交互的场景：

1. 安装库：

   npm install dropzone

2. 示例代码：

   import Dropzone from "dropzone";  
   const dropzone = new Dropzone("#dropzone", {  
   url: "/upload",  
   autoProcessQueue: false,  
   accept: (file, done) => {  
    console.log("File added:", file);  
    done();  
   }  
   });  

• 支持拖放文件/目录上传。
• 需配合后端处理上传逻辑。

通过 Electron 实现系统目录选择

在桌面端应用中，使用 Electron 的 dialog 模块：

const { dialog } = require('electron');  
const result = await dialog.showOpenDialog({  
  properties: ['openDirectory']  
});  
console.log('Selected directory:', result.filePaths);  

• 仅适用于 Electron 环境。
• openDirectory 限制只能选择目录。

注意事项

• 浏览器安全性限制：JavaScript 无法直接访问本地文件系统路径（C:\ 等）。
• 目录选择兼容性：webkitdirectory 非标准特性，Firefox/Safari 可能不支持。
• 文件处理：通过 FileReader API 读取文件内容，例如：

  const reader = new FileReader();  
  reader.onload = (e) => console.log(e.target.result);  
  reader.readAsText(file);