JS 如何获取用户上传的 .txt 文本文件的内容

核心思路 #

通过监听文件输入控件的change事件，结合FileReader API完成本地文本文件的内容读取，不需要后端交互。

完整实现代码 #

// 获取文件输入控件
const fileInput = document.getElementById('textin');

// 绑定文件选择事件
fileInput.addEventListener('change', function(e) {
  // 获取选中的第一个文件
  const selectedFile = e.target.files[0];
  // 非空校验 + 格式校验
  if (!selectedFile || selectedFile.type !== 'text/plain') {
    alert('请选择有效的txt格式文件');
    return;
  }

  // 实例化文件读取对象
  const reader = new FileReader();
  // 按文本格式读取文件
  reader.readAsText(selectedFile);
  // 读取完成回调
  reader.onload = function() {
    // reader.result就是txt文件的完整内容，直接用就行
    const txtContent = reader.result;
    console.log('读取到的文件内容：', txtContent);
    // 后续业务逻辑写在这里即可
  };

  // 可选：读取失败的异常处理
  reader.onerror = function() {
    console.error('文件读取失败：', reader.error);
  };
});

可选：Promise封装适配async/await写法 #

如果不想嵌套回调，可以把读取逻辑封装成Promise，用同步写法调用：

function readTxtFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
  });
}

// 调用示例
fileInput.addEventListener('change', async function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile || selectedFile.type !== 'text/plain') {
    alert('请选择有效的txt格式文件');
    return;
  }
  try {
    const txtContent = await readTxtFile(selectedFile);
    console.log('读取到的内容：', txtContent);
  } catch (err) {
    console.error('读取失败：', err);
  }
});

注意：文件读取是异步操作，不能在change事件回调外部同步拿到读取结果，所有用到文件内容的逻辑都要放在读取完成的回调/await之后。

内容的提问来源于stack exchange，提问作者Peter Playz