知识问答

使用JS操作文件

发布时间：2026-05-09 23:53:18 浏览量：0

使用JS操作文件可以通过浏览器的FileReader API或Node.js的fs模块来实现。下面分别介绍这两种方式的实现方法。

使用FileReader读取文件

步骤

  1. 通过<input type="file">元素选择文件，获取文件的File对象
  2. 利用FileReader对象读取文件内容
  3. 将读取的文件内容显示到页面上

代码示例

<!DOCTYPE html><html><head>    <title>使用FileReader读取文件</title>    <meta charset="UTF-8"></head><body>    <input type="file" id="fileInput">    <p id="fileContent"></p>    <script>        const fileInput = document.getElementById('fileInput')        const fileContent = document.getElementById('fileContent')        fileInput.addEventListener('change', (event) => {            const file = event.target.files[0]            const reader = new FileReader()            reader.onload = (event) => {                fileContent.textContent = event.target.result            }            reader.readAsText(file)        })    </script></body></html>

在上面的代码里，当用户选择文件后，change事件触发，我们通过FileReader对象读取文件内容，通过readAsText()方法将文件内容转换为字符串，并将其赋值给textContent属性，最后将读取到的文件内容显示在页面上。

使用Node的fs模块操作文件

步骤

  1. 引入fs模块
  2. 选择文件，获取文件路径
  3. 读取文件内容
  4. 将读取到的内容进行处理

代码示例

const fs = require('fs')fs.readFile('test.txt', 'utf-8', (err, data) => {    if (err) throw err    console.log(data)})

在上面的代码里，我们通过require('fs')来引入fs模块。然后通过fs.readFile()方法来读取文件，参数分别为文件路径、编码方式和回调函数。回调函数中的err代表读取文件时的错误信息，data代表读取到的文件内容。

总之，无论是使用浏览器的FileReader API还是Node的fs模块，都可以通过简单的几行代码实现文件的读取。