js实现文件夹目录选择文件

使用 input 元素实现文件选择

在 HTML 中可以通过 input 元素实现文件选择功能。设置 type="file" 属性可以让用户选择文件，添加 webkitdirectory 和 directory 属性可以启用文件夹选择模式。

<input type="file" id="folderInput" webkitdirectory directory multiple>

JavaScript 部分可以监听 change 事件获取选择的文件列表：

document.getElementById('folderInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        console.log(files[i].webkitRelativePath);
    }
});

处理文件列表和路径

通过 webkitRelativePath 属性可以获取文件在文件夹中的相对路径。这个属性返回一个字符串，表示文件相对于所选文件夹的路径。

function handleFolderSelect(event) {
    const files = Array.from(event.target.files);
    const folderStructure = {};

    files.forEach(file => {
        const pathParts = file.webkitRelativePath.split('/');
        let currentLevel = folderStructure;

        for (let i = 0; i < pathParts.length - 1; i++) {
            const part = pathParts[i];
            if (!currentLevel[part]) {
                currentLevel[part] = {};
            }
            currentLevel = currentLevel[part];
        }

        currentLevel[pathParts[pathParts.length - 1]] = file;
    });

    console.log(folderStructure);
}

使用拖放 API 实现文件夹选择

除了传统的文件选择对话框，还可以通过拖放 API 实现文件夹选择功能。需要阻止默认的拖放行为并处理 drop 事件。

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropArea.classList.add('dragover');
});

dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('dragover');
});

dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.classList.remove('dragover');

    const items = e.dataTransfer.items;
    const files = [];

    for (let i = 0; i < items.length; i++) {
        const entry = items[i].webkitGetAsEntry();
        if (entry) {
            traverseFileTree(entry, files);
        }
    }

    console.log(files);
});

function traverseFileTree(entry, files, path = '') {
    if (entry.isFile) {
        entry.file(file => {
            file.filepath = path + file.name;
            files.push(file);
        });
    } else if (entry.isDirectory) {
        const dirReader = entry.createReader();
        dirReader.readEntries(entries => {
            for (let i = 0; i < entries.length; i++) {
                traverseFileTree(entries[i], files, path + entry.name + '/');
            }
        });
    }
}

浏览器兼容性注意事项

文件夹选择功能在不同浏览器中的支持程度不同。webkitdirectory 属性主要在基于 WebKit 的浏览器中有效，如 Chrome 和 Edge。Firefox 从版本 50 开始支持 webkitdirectory，但行为可能略有不同。

function checkFolderSelectionSupport() {
    const input = document.createElement('input');
    input.type = 'file';
    return 'webkitdirectory' in input || 'directory' in input;
}

if (!checkFolderSelectionSupport()) {
    alert('您的浏览器不支持文件夹选择功能');
}

样式和用户体验优化

为文件选择控件添加适当的样式可以改善用户体验。可以使用 CSS 隐藏默认的输入控件，创建一个更美观的替代按钮。

.folder-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.folder-input-button {
    padding: 8px 16px;
    background: #4285f4;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

#folderInput {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

HTML 结构：

<div class="folder-input-wrapper">
    <button class="folder-input-button">选择文件夹</button>
    <input type="file" id="folderInput" webkitdirectory directory multiple>
</div>

处理大型文件夹

当用户选择包含大量文件的文件夹时，可能需要优化性能以避免界面冻结。可以使用 Web Workers 或分批处理文件。

async function processLargeFolder(files, batchSize = 100) {
    for (let i = 0; i < files.length; i += batchSize) {
        const batch = Array.from(files).slice(i, i + batchSize);
        await processFileBatch(batch);
        updateProgress(i + batch.length, files.length);
    }
}

function processFileBatch(batch) {
    return new Promise(resolve => {
        setTimeout(() => {
            batch.forEach(file => {
                // 处理每个文件
            });
            resolve();
        }, 0);
    });
}

function updateProgress(processed, total) {
    const percent = Math.round((processed / total) * 100);
    console.log(`处理进度: ${percent}%`);
}