浏览器获取本地文件夹及文件内容

 #浏览器读取本地文件夹及内容#

根据浏览器内置API showDirectoryPicker() 可以打开文件选择窗口

//showDirectoryPicker 异步方法
//handel  文件夹处理句柄
let handle = await showDirectoryPicker()
console.log(handle)

必须经过用户同意才可以获取

 

        //html里创建按钮获取按钮添加点击事件
        const btn = document.getElementById('btn')
        btn.onclick = async function () {
            try {
                //showDirectoryPicker 异步方法 打开选择文件夹窗口
                //handel  文件夹处理句柄
                let handle = await showDirectoryPicker()
                console.log(handle)

                // 获取根目录及其子文件
                const root = await processHandle(handle)
                console.log('+++++++++', root);

                //获取文件夹下的子文件
                const fileHandle = root.children
                console.log('---------', fileHandle);
                
                //循环在body里添加了根目录里所有文件夹及文件的文件名
                for (let i = 0; i < fileHandle.length; i++) {
                     //创建文件夹div;
                    var divElement = document.createElement('div');
                     //设置div里内容为文件名
                    divElement.textContent = fileHandle[i].name;
                    //设置div点击事件 在控制台打印 文件内容
                    divElement.onclick = async function () {
                        //判断是否为文件夹
                        if (fileHandle[i].kind == 'directory') {
                            //如果是文件夹 则不做处理
                            return
                        }
                        // 获取文件
                        const file = await fileHandle[i].getFile()

                        // 创建一个FileReader对象
                        const reader = new FileReader()
                        // 为reader对象设置onerror回调函数，当读取失败后会调用该函数
                        reader.onerror = function (e) {
                            console.log(e)
                        }
                        // 为reader对象设置onload回调函数，当读取完成后会调用该函数
                        reader.onload = function (e) {
                            console.log('文件内容：\n', e.target.result)
                        }
                        //读取文件内容
                        reader.readAsText(file, 'utf-8')
                    }
                    //将div添加到body中
                    document.body.appendChild(divElement);
                }
            } catch (e) {
                console.log(e)
            }
        }
        //获取根目录及其子文件
        //递归处理
        async function processHandle(handle) {
            if (handle.kind === 'file') {
                return handle
            }
            handle.children = []//子文件
            //得到异步迭代器
            const iter = handle.entries()
            for await (const item of iter) {
                //递归处理
                handle.children.push(await processHandle(item[1]))
            }
            return handle
        }

 这里我循环在body里添加了根目录里所有文件夹及文件的文件名，以便更直观的看的文件目录

在控制台打印 获取到的根目录及其子文件

 给文件添加点击事件，在控制台打印文件内容