js文件夹操作demo - Githubissues

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex {
      display: flex;
    }
    .flex div {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="flex">
    <div>
      <button id="js-opendir">选择文件夹</button>
      <ul id="js-dir"></ul>
    </div>
    <div class="flex">
      <button id="js-savebtn">保存文件</button>
      <textarea id="js-textarea" cols="50" rows="50"></textarea>
    </div>
  </div>
  <script>
    document.getElementById('js-opendir').addEventListener('click', open, true)
    document.getElementById('js-savebtn').addEventListener('click', saveFile, true)
    let dirHandle = null
    let editFileHandle = null
    // 选择路径
    async function open () {
      dirHandle = await window.showDirectoryPicker();
      const fragment = await getFileInDir(dirHandle.values())
      document.getElementById('js-dir').appendChild(fragment)
    }

    // 目录/文件点击事件
    async function openFile(e) {
      console.log(e.target.dataset.type)
      const type = e.target.dataset.type
      const name = e.target.dataset.name
      if (type === 'directory') {
        // 点击目录 列出目录下文件
        const currentDirHandle = await dirHandle.getDirectoryHandle(name, {
          create: true,
        })
        const frag = await getFileInDir(currentDirHandle.values())
        const childUl = document.createElement('ul')
        childUl.appendChild(frag)
        e.target.appendChild(childUl)
      } else if (type === 'file') {
        // 点击文件 读取文件
        const currentFileHandle = await dirHandle.getFileHandle(name, { create: true })
        const currentFile = await currentFileHandle.getFile()
        console.log(currentFile)
        const content = await getFileContent(currentFile)
        document.getElementById('js-textarea').value = content
        editFileHandle = currentFileHandle
      }
    }
    // 保存文件内容
    async function saveFile () {
      const writable = await editFileHandle.createWritable()
      // 将文件内容写入到流中。
      const content = document.getElementById('js-textarea').value
      await writable.write(content)

      // 关闭文件并将内容写入磁盘。
      await writable.close()
    }
    // 获取目录下文件
    async function getFileInDir (values) {
      const fragment = new DocumentFragment()
      for await (const item of values) {
        const li = document.createElement('li')
        li.setAttribute('data-type', item.kind)
        li.setAttribute('data-name', item.name)
        li.innerText = item.kind + ': ' + item.name
        li.addEventListener('click', openFile, true)
        fragment.append(li)
      }
      return fragment
    }

    // 获取文件内容
    function getFileContent(file) {
      return new Promise(resolve => {
        const reader = new FileReader()
        reader.onload = (evt) => {
          resolve(evt.target.result)
        }
        reader.readAsText(file)
      })
    }
  </script>
</body>
</html>
klren0312 / daliy_knowledge

js文件夹操作demo #763
