如何用JavaScript将<input type=file>选中的文件内容显示在<textarea>中？

你当前的问题核心是没利用FileReader的异步加载逻辑，而且选错了文件读取方法——readAsDataURL是用来生成资源的base64链接（比如图片预览），不适合读取文本内容，再加上直接把File对象赋值给textarea，自然只会显示对象类型。

下面是正确的实现方案：

完整代码示例 #

<!-- HTML结构 -->
<input type="file" id="file" accept="text/*">
<textarea id="compose" rows="10" cols="50"></textarea>

<script>
// JavaScript逻辑
const textfile = document.getElementById('file');
const textarea = document.getElementById('compose');

textfile.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 校验文件类型，只处理文本类文件
  if (!selectedFile.type.startsWith('text/')) {
    alert('请选择文本格式的文件');
    return;
  }

  const reader = new FileReader();
  // 用readAsText读取文件的文本内容
  reader.readAsText(selectedFile);

  // 监听加载完成事件，异步获取读取结果
  reader.addEventListener('load', () => {
    textarea.value = reader.result;
  });

  // 可选：处理文件读取失败的情况
  reader.addEventListener('error', () => {
    alert(`文件读取失败：${reader.error.message}`);
  });
});
</script>

关键细节说明 #

• 选对读取方法：readAsText()专门用于读取文本文件内容，直接返回字符串，适合填充到textarea；而readAsDataURL()是生成base64编码的资源链接，多用于图片、音频预览场景。
• 异步逻辑处理：FileReader是异步操作，必须在load事件触发后才能拿到正确的读取结果，不能在调用readAsText后直接赋值。
• 文件类型限制：通过HTML的accept="text/*"和JS里的type.startsWith('text/')双重限制，避免用户上传非文本文件导致乱码。
• 错误兜底：添加error事件监听，能在文件损坏、权限不足等异常场景下给用户明确提示。

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