用纯JS语言实现文件读写的功能
时间: 2023-10-24 15:04:45 浏览: 44
在浏览器端,JavaScript 本身是没有文件读写的能力的,但是可以通过浏览器提供的 File API 来实现文件的读写操作。以下是一个简单的实现文件读取的示例代码:
```javascript
function readFile(file, callback) {
let reader = new FileReader();
reader.onload = function(event) {
callback(event.target.result);
};
reader.readAsText(file);
}
// 使用示例
let fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(event) {
let file = event.target.files[0];
readFile(file, function(content) {
console.log(content);
});
});
```
以上代码中,`readFile` 函数用于读取指定的文件,其参数 `file` 是一个 File 对象,`callback` 是读取成功后的回调函数。在函数内部,创建一个 FileReader 对象并设置其 `onload` 事件回调函数,当读取完成后会回调该函数并传递文件内容,最后调用 `readAsText` 方法开始读取文件。
使用示例中,先获取一个 `input[type="file"]` 元素作为文件选择器,当用户选择文件后,调用 `readFile` 函数进行读取,并在回调函数中输出文件内容。
写文件的操作同样需要借助浏览器提供的 API,这里简单介绍一下如何将字符串写入文件:
```javascript
function writeFile(filename, content) {
let blob = new Blob([content], {type: 'text/plain;charset=utf-8'});
let link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
}
// 使用示例
writeFile('example.txt', 'Hello, world!');
```
以上代码中,`writeFile` 函数接收两个参数:`filename` 是要保存的文件名,`content` 是要保存的文件内容。在函数内部,创建一个 Blob 对象并设置其 MIME 类型为文本类型,然后创建一个 `a` 元素,将 Blob 对象的 URL 赋值给 `href` 属性,将要保存的文件名赋值给 `download` 属性,最后触发 `click` 事件即可将文件保存到本地。
需要注意的是,以上代码中的文件操作只适用于在浏览器端进行,如果要在 Node.js 等环境中实现文件读写,需要使用 Node.js 提供的 fs 模块。