1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FileSystem API PRC.</title>
</head>
<body>
    <button id="chooseDir">选择文件夹</button>
</body>
<script>
    const btn = document.querySelector("#chooseDir")
    btn.onclick = async function (){
        // 得到句柄
        let handle = await showDirectoryPicker()
        // 根句柄
        const root = await processHandle(handle)
        console.log(root)

        // 测试得到的文件
        const fileHandle = root.children[1] // 必须是文件 否则getFile()将失败
        const file = await fileHandle.getFile()
        const reader = new FileReader()
        reader.onload = function (e){
            console.log(e.target.result)
        }
        reader.readAsDataURL(file)
    }
    async function processHandle(handle){
        if( handle.kind === 'file' ){
            return handle;
        }
        handle.children = []
        // 得到异步迭代器
        let iter = handle.entries()
        for await (const item of iter){
            handle.children.push(await processHandle(item[1]))
        }
        return handle;
    }

</script>
</html>