不用后端用前端写一个JS读取文件夹内容返回json

在前端使用JavaScript读取文件夹内容并返回JSON的方法是使用File API和递归遍历文件夹的方式。下面是一个示例代码：

function readFolder(folderPath) {
  return new Promise((resolve, reject) => {
    let folderReader = null;
    const files = [];

    function readEntries() {
      folderReader.readEntries((entries) => {
        if (entries.length === 0) {
          resolve(files);
        } else {
          entries.forEach((entry) => {
            if (entry.isFile) {
              entry.file((file) => {
                const fileData = {
                  name: file.name,
                  type: file.type,
                  size: file.size,
                  lastModified: file.lastModified
                };
                files.push(fileData);
                readEntries();
              });
            } else if (entry.isDirectory) {
              readFolder(entry.path).then((subFiles) => {
                files.push(...subFiles);
                readEntries();
              });
            }
          });
        }
      }, (error) => {
        reject(error);
      });
    }

    if ('webkitDirectory' in HTMLInputElement.prototype) {
      const input = document.createElement('input');
      input.type = 'file';
      input.webkitdirectory = true;
      input.onchange = function(e) {
        const folder = e.target.files[0];
        folderReader = folder.createReader();
        readEntries();
      };
      input.click();
    } else {
      reject(new Error('This browser does not support reading folders.'));
    }
  });
}

// 调用示例
readFolder('/path/to/folder').then((files) => {
  console.log(files);
}).catch((error) => {
  console.error(error);
});

这段代码首先创建一个readFolder函数，它接受一个文件夹路径作为参数。函数返回一个Promise，当成功读取文件夹内容时，Promise将解析为一个包含文件信息的数组。如果无法读取文件夹，Promise将被拒绝，并返回一个错误。

该函数使用File API中的webkitdirectory属性，该属性允许通过文件选择对话框选择整个文件夹。如果浏览器不支持webkitdirectory属性，则会拒绝Promise并返回一个错误。

然后，函数使用递归遍历文件夹的方式读取文件夹内容。对于每个文件，它会获取文件的相关信息（如名称、类型、大小、最后修改时间），并将其添加到文件数组中。对于每个子文件夹，它会递归调用readFolder函数并将子文件夹的文件添加到文件数组中。

最后，我们可以使用readFolder函数来读取文件夹的内容并打印文件信息。你需要将/path/to/folder替换为实际的文件夹路径