JS 读写文件|极客笔记

JS 读写文件

在网页开发中，我们经常需要读取或写入文件来实现一些功能，如存储用户输入的数据、导入导出文件等。而在 JavaScript 中，我们也可以通过浏览器提供的 API 来实现文件的读写操作。本文将详细介绍如何在 JavaScript 中进行文件的读写操作，帮助读者更好地理解和应用这一功能。

一、文件读取操作

在 JavaScript 中，我们可以通过 FileReader 对象来进行文件读取操作。FileReader 对象提供了一系列用于读取文件的方法和事件，可以实现文件的异步读取。下面是一个简单的文件读取示例：

// 创建FileReader对象
let reader = new FileReader();

// 选择文件
let fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.addEventListener('change', function() {
    let file = fileInput.files[0];

    // 读取文件
    reader.onload = function(event) {
        let content = event.target.result;
        console.log(content);
    }

    reader.readAsText(file);
});

document.body.appendChild(fileInput);

在上面的示例中，我们首先创建了一个 FileReader 对象，然后创建一个 <input type="file"> 元素作为文件选择器。当用户选择文件后，会触发 change 事件，我们通过 fileInput.files[0] 获取用户选择的文件，并通过 readAsText 方法读取文件内容。最后，在 onload 事件中，我们可以获取到文件的文本内容并输出到控制台。

运行上面的示例后，选择一个文本文件，控制台会输出该文件的内容。这样，我们就可以通过 JavaScript 读取本地文件，实现一些文件操作的功能。需要注意的是，由于涉及到文件读取操作，浏览器可能会有一些限制，需要在服务器环境下测试。

二、文件写入操作

除了文件读取操作，JavaScript 也可以通过浏览器提供的 API 实现文件的写入操作。在 HTML5 中，引入了 File 和 Blob 对象，其中 Blob 对象表示不可变的原始数据，可以通过 File 对象来操作。下面是一个简单的文件写入示例：

// 创建Blob对象
let content = 'Hello, World!';
let blob = new Blob([content], { type: 'text/plain' });

// 创建下载链接
let downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'hello.txt';

// 点击下载
document.body.appendChild(downloadLink);
downloadLink.click();

在上面的示例中，我们先创建了一个 Blob 对象，将要写入的内容存储在该对象中，并指定为 text/plain 类型。然后，通过 URL.createObjectURL 来创建一个 URL 对象，将 Blob 对象的数据转换为一个可访问的地址。接着，创建一个 <a> 元素作为下载链接，并指定 download 属性为文件名。最后，通过 click 方法触发下载操作。

运行上面的示例后，会自动下载一个名为 hello.txt 的文件，内容为 Hello, World!。这样，我们就实现了通过 JavaScript 创建并写入文件的功能。需要注意的是，写入文件是在浏览器本地进行，用户需要手动选择保存位置。