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

Question

Please see How to get the contents of the directory from local PC in javascript . There is a link to a jsfiddle that just prints out the names of the files. Is it possible to access their content as well? If yes then how exactly?

Answer 1

May be a Google-Chrome-specific answer... I found https://github.com/GoogleChromeLabs/browser-nativefs . This has a link https://browser-nativefs.glitch.me/ . View source and download the html, css and mjs files.

I modified script.mjs as follows (sharing only the modified part of the code, with comments to indicate the exact modifications):

  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`;
      });