js实现文件夹目录选择文件
使用 <input type="file"> 实现文件选择
通过HTML原生的文件输入元素，配合webkitdirectory属性实现目录选择：
<input type="file" id="directoryInput" webkitdirectory directory multiple>
<script>
document.getElementById('directoryInput').addEventListener('change', (event) => {
const files = event.target.files;
for (const file of files) {
console.log(file.webkitRelativePath); // 输出文件相对路径
}
});
</script>注意：webkitdirectory为非标准属性，仅在Chrome、Edge等基于Chromium的浏览器中支持。
通过拖放API实现目录上传
监听拖放事件并处理DataTransferItem的webkitGetAsEntry()方法获取目录结构：
document.addEventListener('drop', (e) => {
e.preventDefault();
const items = e.dataTransfer.items;
for (const item of items) {
const entry = item.webkitGetAsEntry();
if (entry.isDirectory) {
readDirectory(entry);
}
}
});
function readDirectory(directoryEntry) {
const reader = directoryEntry.createReader();
reader.readEntries((entries) => {
for (const entry of entries) {
if (entry.isFile) {
entry.file((file) => {
console.log(file.name);
});
}
}
});
}使用第三方库（如FilePond）
FilePond等库可简化目录处理流程：
import { FilePond } from 'filepond';
const pond = new FilePond({
allowProcessDirectory: true,
onaddfile: (error, file) => {
if (error) return;
console.log(file.filename);
}
});需注意浏览器兼容性，通常仍需依赖Chromium内核。
兼容性处理方案
对于不支持目录选择的浏览器（如Firefox），可降级为多文件选择：
const input = document.createElement('input');
input.type = 'file';
input.multiple = true;
input.onchange = () => {
Array.from(input.files).forEach(file => {
console.log(file.name);
});
};
input.click();注意事项
- 目录选择功能目前主要依赖
webkitdirectory，非所有浏览器支持。 - 文件路径安全性限制可能导致
webkitRelativePath返回空值。 - 大目录处理需考虑性能问题，建议分批次读取。
以上方法可根据实际需求选择，优先推荐原生<input>方案配合拖放API增强体验。
