前端JS读取文件夹内容并返回JSON数据：无需后端实现

{"title":"前端JS读取文件夹内容并返回JSON数据：无需后端实现","description":"使用JavaScript File API 和递归遍历，无需后端即可实现前端读取文件夹内容并返回JSON数据。本文提供示例代码和详细解释，帮助你轻松实现此功能。","keywords":"前端读取文件夹, JavaScript, File API, 递归遍历, JSON, 文件信息, 无需后端, 示例代码","content":""function readFolder(folderPath) {\n return new Promise((resolve, reject) => {\n let folderReader = null;\n const files = [];\n\n function readEntries() {\n folderReader.readEntries((entries) => {\n if (entries.length === 0) {\n resolve(files);\n } else {\n entries.forEach((entry) => {\n if (entry.isFile) {\n entry.file((file) => {\n const fileData = {\n name: file.name,\n type: file.type,\n size: file.size,\n lastModified: file.lastModified\n };\n files.push(fileData);\n readEntries();\n });\n } else if (entry.isDirectory) {\n readFolder(entry.path).then((subFiles) => {\n files.push(...subFiles);\n readEntries();\n });\n }\n });\n } }, (error) => {\n reject(error);\n });\n }\n\n if ('webkitDirectory' in HTMLInputElement.prototype) {\n const input = document.createElement('input');\n input.type = 'file';\n input.webkitdirectory = true;\n input.onchange = function(e) {\n const folder = e.target.files[0];\n folderReader = folder.createReader();\n readEntries();\n };\n input.click();\n } else {\n reject(new Error('This browser does not support reading folders.'));\n }\n });\n}\n\n// 调用示例\nreadFolder('/path/to/folder').then((files) => {\n console.log(files);\n}).catch((error) => {\n console.error(error);\n});\n"\n\n这段代码首先创建一个readFolder函数，它接受一个文件夹路径作为参数。函数返回一个Promise，当成功读取文件夹内容时，Promise将解析为一个包含文件信息的数组。如果无法读取文件夹，Promise将被拒绝，并返回一个错误。\n\n该函数使用File API中的webkitdirectory属性，该属性允许通过文件选择对话框选择整个文件夹。如果浏览器不支持webkitdirectory属性，则会拒绝Promise并返回一个错误。\n\n然后，函数使用递归遍历文件夹的方式读取文件夹内容。对于每个文件，它会获取文件的相关信息（如名称、类型、大小、最后修改时间），并将其添加到文件数组中。对于每个子文件夹，它会递归调用readFolder函数并将子文件夹的文件添加到文件数组中。\n\n最后，我们可以使用readFolder函数来读取文件夹的内容并打印文件信息。你需要将/path/to/folder替换为实际的文件夹路径。\n