JavaScript FileReader API: 读取 TXT 文件的函数封装

function readTextFile(file, callback) { var reader = new FileReader(); reader.onload = function() { callback(reader.result); }; reader.readAsText(file); }

// 使用方法 var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function() { var file = fileInput.files[0]; readTextFile(file, function(result) { console.log(result); // 处理文本内容 }); });

// 代码解释

1. readTextFile 函数

   • 接收两个参数：file 表示要读取的文件对象，callback 表示读取成功后的回调函数。
   • 创建 FileReader 对象。
   • 设置 onload 事件监听器，当文件读取完成后调用 callback 函数，并将读取到的文本内容作为参数传递。
   • 使用 readAsText 方法开始读取文件内容，将文件对象作为参数传递。

2. 使用 readTextFile 函数

   • 获取文件输入元素。
   • 监听文件输入元素的 change 事件，当用户选择文件后触发事件处理函数。
   • 获取用户选择的文件对象。
   • 调用 readTextFile 函数，将文件对象和回调函数作为参数传递。
   • 在回调函数中，可以获取读取到的文本内容并进行处理。

// 注意事项

• 确保用户已经授权网站访问文件系统。
• 文件读取过程可能需要一定时间，需要根据实际情况进行处理。
• 可以使用 onerror 事件监听器处理文件读取错误。