js读取文件的方法

在JavaScript开发中，读取文件是一项常见需求。无论是从本地获取数据，还是与服务器进行数据交互，掌握有效的文件读取方法至关重要。

1. 使用FileReader对象读取本地文件

FileReader对象是HTML5新增的，用于在浏览器环境中异步读取本地文件内容。通过HTML的文件输入元素<input type="file">获取用户选择的文件。例如：

<input type="file" id="fileInput">

在JavaScript中，可以这样读取文件：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onloadend = function() {
        const fileContent = reader.result;
        console.log(fileContent);
    };
    if (file) {
        reader.readAsText(file);
    }
});

这里，readAsText方法将文件内容读取为文本格式，读取完成后，result属性包含文件内容。

2. 使用XMLHttpRequest对象读取文件

XMLHttpRequest（XHR）可用于在浏览器端向服务器发送请求并获取响应，也能读取本地文件（受同源策略限制）。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.txt', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const fileContent = xhr.responseText;
        console.log(fileContent);
    }
};
xhr.send();

open方法设置请求的类型、文件路径和是否异步。onreadystatechange监听状态变化，当readyState为4且status为200时，表示请求成功，responseText包含文件内容。

3. Node.js中读取文件

在服务器端的Node.js环境中，使用fs模块读取文件。首先引入fs模块：

const fs = require('fs');

同步读取

try {
    const data = fs.readFileSync('example.txt', 'utf8');
    console.log(data);
} catch (err) {
    console.error(err);
}

异步读取

fs.readFile('example.txt', 'utf8', function(err, data) {
    if (err) {
        console.error(err);
        return;
    }
    console.log(data);
});

同步读取会阻塞线程，而异步读取不会，更适合处理大型文件或需要提高性能的场景。

掌握这些JavaScript读取文件的方法，能在不同开发场景下高效获取和处理文件数据，无论是前端页面的数据填充，还是后端服务器的数据处理，都能游刃有余。