在现代 web 开发中，JavaScript 提供了一些方法来读取本地文件和目录。尽管 JavaScript 是一种通常在浏览器中运行的语言，但通过一些现代的 API，如 File API 和 File System Access API，我们可以实现读取本地文件和目录。本文将详细介绍这两种方法，并提供相应的代码示例。
一、使用 File API 读取本地文件
File API 允许我们通过 <input> 标签读取用户的本地文件。用户需要手动选择文件，浏览器才能访问这些文件。下面是一个基本示例，展示如何使用 File API 读取用户选择的文件。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件读取示例</title>
</head>
<body>
<h1>读取本地文件</h1>
<input type="file" id="fileInput" />
<pre id="fileContent"></pre>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0]; // 获取用户选择的文件
if (file) {
const reader = new FileReader(); // 创建 FileReader 对象
reader.onload = function(e) {
const content = e.target.result; // 文件内容
document.getElementById('fileContent').textContent = content; // 显示文件内容
};
reader.readAsText(file); // 以文本格式读取文件
} else {
alert('没有选择文件');
}
});
</script>
</body>
</html>
在上面的代码中，用户通过 <input> 标签选择文件。通过 FileReader，文件被读取为文本，并在页面上显示出来。
二、使用 File System Access API 读取本地目录
File System Access API 提供了一种更为强大的方式来直接与用户的文件系统进行交互，包括读取文件和目录。这种 API 允许我们获得用户选择的文件或目录的引用，从而可以进行更复杂的操作。
要使用 File System Access API，浏览器需要支持该接口，因此在实际应用中需要检测浏览器的支持情况。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>读取本地目录示例</title>
</head>
<body>
<h1>读取本地目录</h1>
<button id="pickDir">选择目录</button>
<pre id="dirContent"></pre>
<script>
document.getElementById('pickDir').addEventListener('click', async () => {
// 检查是否支持 File System Access API
if ('showDirectoryPicker' in window) {
try {
const dirHandle = await window.showDirectoryPicker(); // 让用户选择目录
const dirContent = document.getElementById('dirContent');
dirContent.textContent = ''; // 清空内容
for await (const entry of dirHandle.values()) {
dirContent.textContent += `${entry.name}\n`; // 显示当前目录下的文件名
}
} catch (error) {
console.error(error);
}
} else {
alert('当前浏览器不支持 File System Access API');
}
});
</script>
</body>
</html>
在这个示例中，用户通过点击按钮选择一个目录。然后，使用 showDirectoryPicker 方法读取这个目录下的文件信息，并将文件名显示在网页上。
总结
通过 File API 和 File System Access API，JavaScript 可以相对容易地读取本地文件和目录。这些方法使得开发者能够创建更为复杂和有趣的 web 应用程序，但必须注意安全性和用户隐私，始终确保用户明确同意文件访问。此外，同时支持这些功能的浏览器相对较新，开发者需确保其用户使用的是支持的版本。
