Javascript 操作文件 实现方法小结

在Javascript中，操作文件的方法主要是使用File API和XMLHttpRequest对象的responseText、responseXML属性。

File API

1. 读取文件内容

使用File API的读取文件内容主要有以下几个步骤：

1. 创建一个FileReader对象
2. 调用FileReader对象的readAsText()方法读取文件内容
3. 等待onload事件触发，将文件内容保存到对象的result属性中

下面是一个读取文本文件的例子：

const reader = new FileReader(); // 创建FileReader对象
reader.onload = function () { // 监听onload事件
  console.log(reader.result); // 打印文件内容
};
reader.readAsText(file); // 读取文件内容

2. 写入文件内容

使用File API的写入文件内容主要有以下几个步骤：

1. 创建一个Blob对象
2. 创建一个URL地址
3. 创建一个下载链接并移除
4. 创建一个a标签，并将href属性设置为创建的URL地址
5. 创建鼠标点击事件，并将a标签添加到页面上
6. 触发鼠标点击事件，下载文件

下面是一个将内容写入文本文件的例子：

const data = 'Hello World!'; // 准备要写入的内容
const fileName = 'hello.txt'; // 准备要写入的文件名

// 创建Blob对象以及URL地址
const blob = new Blob([data], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

// 创建下载链接并移除
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);

// 创建鼠标点击事件，并将a标签添加到页面上
const event = new MouseEvent('click');
link.dispatchEvent(event);

// 释放URL对象
URL.revokeObjectURL(url);

XMLHttpRequest

1. 读取文件内容

通过XMLHttpRequest的responseText属性可以读取文件的内容。下面是一个读取文本文件内容的例子：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'text.txt');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText); // 打印文件内容
    }
};
xhr.send();

2. 写入文件内容

通过XMLHttpRequest的POST方法可以将内容写入文件中。下面是一个将内容写入文本文件的例子：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'save.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText); // 打印返回的信息
    }
};
const data = 'content=Hello World!'; // 准备要写入的内容
xhr.send(data);

结论

在Javascript中，操作文件主要使用File API和XMLHttpRequest两个对象。其中，File API更适用于本地文件的操作，而XMLHttpRequest更适用于服务端文件的读写操作。对于大多数场景使用File API就足够了，它的使用也比较方便。