回答

使用递归循环的方式，代码如下：

<html>

<head>
    <script src="//repo.bfw.wiki/bfwrepo/js/eruda.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        body{
        padding: 10px;
        }
    </style>
</head>

<body>
 
    <p><button id="openlocalfile">打开目录</button>

       不要在iframe中打开，结果在console中查看</p>

  
    <script>

            const openbtn = document.getElementById('openlocalfile');
           
            openbtn.onclick = async (evt) => {
  const out = {};
  const dirHandle = await showDirectoryPicker();  
  await handleDirectoryEntry( dirHandle, out );
  console.log( out );
};
async function handleDirectoryEntry( dirHandle, out ) {
  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file"){
      const file = await entry.getFile();
      out[ file.name ] = file;
    }
    if (entry.kind === "directory") {
      const newOut = out[ entry.name ] = {};
      await handleDirectoryEntry( entry, newOut );
    }
  }
}
    </script>
</body>

</html>

还包含文件的详情信息呢