前端打开电脑文件并读取方法-CSDN博客

本文链接：https://blog.csdn.net/qq_43720804/article/details/147458373

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
  </head>
  <body>
    <button>打开文件夹</button>
    <div id="content"></div>
    <script>
      /**
       * 如何实现代码着色
       * 三方库 highlight.js
       */
      const button = document.querySelector('button');
      button.addEventListener('click', async () => {
        // 这个函数会打开文件选择框 并返回选中文件内容
        let handle = await showDirectoryPicker();
        await processHandle(handle);

        // 拿到文件内容
        const fileHandle = handle.children[7];
        console.log('handle: ', handle);
        const file = await fileHandle.getFile(); // 拿到文件属性
        const reader = new FileReader(); // 创建一个文件读取器
        reader.readAsText(file); // 读取文件内容
        reader.onload = () => {
          const content = document.querySelector('#content');
          content.textContent = reader.result; // 显示文件内容
        }
      })

      async function processHandle(handle) {
        // 处理handle
        handle.children = []
        if(handle.kind === 'file') return
        // const entries = await handle.entries(); // 获取文件目录句柄 IO都是异步的
        const values = await handle.values(); // 拿到子句柄
        for await (const item of values) {
          handle.children.push(item)
          await processHandle(item) // 递归处理子目录
        }
      }

      
    </script>
  </body>
</html>