当前位置：首页 > JavaScript

用js实现读写

2026-02-02 19:40:20JavaScript

使用 JavaScript 读写文件

JavaScript 可以通过不同的方式实现文件读写操作，具体方法取决于运行环境（浏览器或 Node.js）。

浏览器环境下的文件读写

在浏览器中，出于安全考虑，JavaScript 不能直接访问文件系统。需要通过用户交互（如文件选择）或使用现代浏览器提供的 File System Access API 来实现。

读取文件内容

用js实现读写

// 通过 input 元素读取文件
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const content = e.target.result;
    console.log(content);
  };

  reader.readAsText(file);
});

写入文件内容

// 使用 Blob 和 URL.createObjectURL 创建下载链接
function saveFile(content, filename) {
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// 调用示例
saveFile('Hello World', 'example.txt');

Node.js 环境下的文件读写

Node.js 提供了内置的 fs 模块，可以更直接地进行文件操作。

用js实现读写

同步方式读写文件

const fs = require('fs');

// 同步读取文件
try {
  const data = fs.readFileSync('input.txt', 'utf8');
  console.log(data);
} catch (err) {
  console.error(err);
}

// 同步写入文件
try {
  fs.writeFileSync('output.txt', 'Hello Node.js', 'utf8');
} catch (err) {
  console.error(err);
}

异步方式读写文件

const fs = require('fs').promises;

// 异步读取文件
async function readFile() {
  try {
    const data = await fs.readFile('input.txt', 'utf8');
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

// 异步写入文件
async function writeFile() {
  try {
    await fs.writeFile('output.txt', 'Hello Async', 'utf8');
  } catch (err) {
    console.error(err);
  }
}

readFile();
writeFile();

使用现代 File System Access API

较新的浏览器支持 File System Access API，提供更强大的文件系统访问能力。

// 请求文件句柄
async function getFile() {
  const handle = await window.showOpenFilePicker();
  const file = await handle[0].getFile();
  const content = await file.text();
  console.log(content);
}

// 保存文件
async function saveFile() {
  const handle = await window.showSaveFilePicker({
    suggestedName: 'example.txt',
    types: [{
      description: 'Text Files',
      accept: { 'text/plain': ['.txt'] }
    }]
  });

  const writable = await handle.createWritable();
  await writable.write('Hello FS Access API');
  await writable.close();
}