时间戳

首页 > 解决方案 > 使用浏览器javascript，如何获取用户指定本地目录的文件和子文件夹的内容

javascript - 使用浏览器javascript，如何获取用户指定本地目录的文件和子文件夹的内容

问题描述

请参阅如何在 javascript 中从本地 PC 获取目录的内容。有一个 jsfiddle 的链接，它只打印出文件的名称。是否也可以访问他们的内容？如果是，那么究竟如何？

标签： javascriptfilesystems

解决方案

可能是特定于 Google-Chrome 的答案...我找到了https://github.com/GoogleChromeLabs/browser-nativefs。这有一个链接 https://browser-nativefs.glitch.me/。查看源代码并下载 html、css 和 mjs 文件。

我修改了 script.mjs 如下（仅共享代码的修改部分，并带有注释以指示确切的修改）：

  Array.prototype.asyncForEach = async function (fn) {
    for (let i = 0; i < this.length; i++) {
      await fn(this[i], i);
    }
  };

openDirectoryButton.addEventListener('click', async () => {
    try {
      const blobs = await directoryOpen({ recursive: true });
      alert('upload of folder is done')
      //const blobs = await directoryOpen();
      let fileStructure = '';
      await/*added this 'await'*/ blobs.sort((a, b) => {
        a = a.webkitRelativePath + a.name;
        b = b.webkitRelativePath + b.name;
        if (a < b) {
          return -1;
        } else if (a > b) {
          return 1;
        }
        return 0;
      }).asyncForEach/*changed this forEach to asyncForEach*/(async (blob) => {
        // The Native File System API currently reports the `webkitRelativePath`
        // as empty string `''`.
        //added print out of file blob content
        fileStructure += `${blob.webkitRelativePath}${
          blob.webkitRelativePath.endsWith(blob.name) ?
            '' : blob.name}, content: ${await blob.text()}\n`;
      });

推荐阅读