js获取文件夹中的所有文件和子文件夹

2023-12-29 13:53:29
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取文件夹中的所有文件和子文件夹</title>
</head>

<body>
    <button>
        打开文件夹
    </button>
</body>
<script>
    /**
   * 获取按钮元素并添加点击事件处理函数
   */
    var btn = document.querySelector('button');
    btn.onclick = async function () {
        // 显示文件选择器
        const directoryHandle = await window.showDirectoryPicker();
        // 处理目录
        await proecssHandle(directoryHandle);
        // 获取目录下的第三个子项（即文件）
        const files = await directoryHandle.children[2];
        // 获取文件
        const file = await files.getFile();
        // 创建文件读取器
        const fileReader = new FileReader();
        // 当文件读取完成时执行回调函数
        fileReader.onload = function (e) {
            console.log(e.target.result);
        }
        // 读取文件内容
        fileReader.readAsText(file);
        // 输出用户选择的目录
        console.log('用户选择的目录是：', directoryHandle);
    };
    async function proecssHandle(handle) {
        // 如果是文件则直接返回
        if (handle.kind === 'file') {
            return;
        }
        // 初始化子文件夹数组
        handle.children = [];
        // 获取文件夹中的所有文件和子文件夹
        let iter = await handle.entries();
        // 遍历文件夹中的所有文件和子文件夹
        for await (let entry of iter) {
            // 递归调用处理函数
            await proecssHandle(entry[1]);
            // 将子文件夹添加到父文件夹的子文件夹数组中
            handle.children.push(entry[1]);
        }
    };


</script>

</html>

文章来源:https://blog.csdn.net/weixin_45791806/article/details/135287289
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。