在 JavaScript 中,可以通过浏览器提供的 File API 来读取和写入本地文件。以下是一个基本的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读写文本文件</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="readFile()">读取文件</button>
<textarea id="fileContent"></textarea>
<br>
<button onclick="saveFile()">保存文件</button>
<script>
var fileInput = document.getElementById('fileInput');
var fileContent = document.getElementById('fileContent');
function readFile() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(event) {
fileContent.value = event.target.result;
};
reader.readAsText(file);
}
function saveFile() {
var content = fileContent.value;
var blob = new Blob([content], { type: 'text/plain' });
var url = URL.createObjectURL(blob);
var link = document.createElement('a');
link.download = 'file.txt';
link.href = url;
link.click();
}
</script>
</body>
</html>
在上面的代码中,我们首先定义了一个 <input type="file">
元素,用于选择要读取的文件。然后,定义了一个 <textarea>
元素,用于显示文件内容,并提供了一个按钮来触发读取文件的操作。
当用户选择文件后,点击“读取文件”按钮会调用 readFile
函数。在这个函数中,我们通过 FileReader
对象来读取文本文件的内容,并将其显示在 <textarea>
中。
当用户在 <textarea>
中修改了文件内容后,点击“保存文件”按钮会调用 saveFile
函数。在这个函数中,我们首先将文件内容转换为 Blob
对象,然后创建一个下载链接并点击它,从而触发浏览器下载该文件。
需要注意的是,由于安全性限制,JavaScript 无法直接访问本地文件系统中的文件。上面的代码只能在浏览器环境中运行,并且需要用户手动选择要读取或保存的文件。此外,尝试写入文件时可能会受到浏览器的安全限制,例如,某些浏览器可能会弹出文件选择框以提示用户确认是否允许写入文件。