如何使用 JavaScript 读取 CSV 文件并自动填充表单输入框-html教程-PHP中文网

如何使用 JavaScript 读取 CSV 文件并自动填充表单输入框

本文介绍如何通过 filereader api 读取本地 csv 文件（两行结构：第一行为 input id，第二行为对应值），并动态将数据填入页面中具有匹配 id 的 input 元素。代码简洁可靠，兼容现代浏览器，无需后端支持。

本文介绍如何通过 filereader api 读取本地 csv 文件（两行结构：第一行为 input id，第二行为对应值），并动态将数据填入页面中具有匹配 id 的 input 元素。代码简洁可靠，兼容现代浏览器，无需后端支持。

在前端开发中，常需从本地 CSV 文件批量初始化表单字段。针对两行 CSV（首行为字段 ID，次行为对应值）的典型场景，可借助 FileReader 实现零依赖、纯前端的数据绑定。

QuickBooks Mileage CSV

使用 qbo-mileage CLI 及用户凭证，从 Airtable、Outlook 或 Google Calendar 记录生成 QuickBooks Online 里程 CSV 文件。

下载

核心实现逻辑

监听的 change 事件；
使用 FileReader.readAsText() 读取文件内容；
按换行符 '\n' 分割为行，再以逗号 ',' 分割每行字段；
遍历第一行获取 id 列表，第二行获取 value 列表，一一映射赋值。

完整可运行示例

<h1>Open CSV and fill input boxes</h1>
<div>
  <input type="file" id="f_csv" accept=".csv"><label for="f_name">First Name:</label>
  <input type="text" id="f_name" name="f_name"><label for="l_name">Last Name:</label>
  <input type="text" id="l_name" name="l_name"><label for="age">Age:</label>
  <input type="number" id="age" name="age">
</div>

<script>
  const fileSelector = document.getElementById('f_csv');
  fileSelector.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function (e) {
      const content = e.target.result;
      const rows = content.trim().split('\n');

      // 确保至少有两行
      if (rows.length < 2) {
        console.error('CSV must contain at least two rows: IDs and values.');
        return;
      }

      const ids = rows[0].split(',').map(id => id.trim());
      const values = rows[1].split(',').map(val => val.trim());

      // 逐项填充 input
      for (let i = 0; i < Math.min(ids.length, values.length); i++) {
        const el = document.getElementById(ids[i]);
        if (el && el.tagName === 'INPUT') {
          el.value = values[i];
        }
      }
    };

    reader.onerror = () => console.error('Failed to read file.');
    reader.readAsText(file);
  });
</script>