如何从文件输入获取数据并写入textarea？求实现方案

你当前的代码无法读取文件内容，核心原因是浏览器的安全机制限制：出于隐私保护，前端无法直接通过本地文件路径（比如C:\fakepath\mytext.txt）读取文件内容，必须借助File API处理用户主动选择的文件。以下是修正后的完整实现方案：

步骤1：补充文件选择控件 #

首先在HTML中添加文件选择框（input[type="file"]），指定仅允许选择TXT文件：

<textarea placeholder="Enter Your Code" id="textarea" class="textarea"></textarea>
<!-- 新增文件选择控件 -->
<input type="file" id="file" accept=".txt">
<button class="butc" onclick="loadFile()">Add</button>

步骤2：修改JavaScript读取逻辑 #

替换原来的open函数（注意不要用open作为函数名，它是浏览器内置方法会冲突），使用FileReader读取文件内容：

function loadFile() {
  // 获取文件选择控件和textarea元素
  const fileInput = document.getElementById('file');
  const textarea = document.getElementById('textarea');
  
  // 检查是否选择了文件
  if (!fileInput.files || fileInput.files.length === 0) {
    alert('请先选择一个TXT文件');
    return;
  }
  
  // 获取选中的文件
  const file = fileInput.files[0];
  // 创建FileReader实例
  const reader = new FileReader();
  
  // 读取完成后的回调
  reader.onload = function(e) {
    // 将读取到的文本内容设置到textarea
    textarea.value = e.target.result;
  };
  
  // 以文本格式读取文件
  reader.readAsText(file);
}

关键说明 #

• 安全限制：浏览器不允许前端直接访问本地文件系统路径，必须通过用户主动选择文件的方式获取文件对象。
• FileReader API：这是HTML5提供的用于读取文件内容的API，支持读取文本、二进制等多种格式。
• accept属性：通过accept=".txt"限制文件选择框仅显示TXT文件，提升用户体验。

内容的提问来源于stack exchange，提问作者Dinç Productions