【JS】前端文件读取FileReader操作总结

// 使用FileReader读取文件的简单示例
 
// 获取文件输入元素
const inputElement = document.getElementById('fileInput');
 
// 为输入元素添加事件监听器
inputElement.addEventListener('change', handleFile, false);
 
// 处理文件函数
function handleFile() {
  const file = inputElement.files[0]; // 获取文件
  if (!file) {
    console.log('未选择文件');
    return;
  }
 
  const reader = new FileReader(); // 创建FileReader实例
 
  // 设置文件读取完毕后的回调函数
  reader.onload = function(event) {
    const content = event.target.result;
    console.log('文件内容：', content); // 输出文件内容
  };
 
  // 设置读取文件过程中的回调函数（可选）
  reader.onprogress = function(event) {
    if (event.loaded && event.total) {
      console.log('读取进度：', (event.loaded / event.total) * 100 + '%');
    }
  };
 
  // 设置读取错误后的回调函数（可选）
  reader.onerror = function(error) {
    console.log('读取文件时发生错误：', error);
  };
 
  // 读取文件为文本
  reader.readAsText(file, 'UTF-8'); // 可以通过指定编码来读取文本文件
}

这段代码演示了如何使用FileReader API读取用户通过文件输入选择的文件。它包括了创建FileReader实例、为其设置不同的事件监听器以及如何读取文件内容。在实际应用中，可以根据需要读取文件为数组缓冲区（readAsArrayBuffer）、DataURL（readAsDataURL）或者二进制字符串（readAsBinaryString）等形式。