如何实现用用户选择的XML文件填充指定HTML表单？

我仔细看了你的代码，发现几个关键问题导致功能没正常跑起来，下面是修正后的完整实现，以及问题的详细说明：

原代码中的主要问题 #

• XML解析时机错误：你在发送请求前就调用了parser.parseFromString(fileURL, 'text/xml')，这时候还没拿到文件内容，解析的只是文件URL字符串而非XML内容。
• 标签选择器拼写错误：XML里的标签是<customMetaData>，但你用了querySelectorAll("customMetaDados")，拼写错误导致找不到目标节点。
• readXML函数逻辑混乱：这个函数存在多处拼写错误（比如getElementByTagName写成getElementByTagName、firstCHild写成firstChild），且功能和loadData重复，完全没必要保留。
• 对象URL使用不当：在请求未完成时就尝试解析，导致无法获取有效XML内容。

修正后的完整代码 #

HTML部分（保留你的表单，添加文件选择控件） #

<p>HTML表单片段</p>
<form id="formContainer">
  <div id="form1">
    <p>Local</p>
    <input class="a" type="date" name="Data" id="Data" placeholder="Data" />
    <input class="a" type="time" name="Hora" id="Hora" placeholder="Hora" />
    <input class="a" type="text" name="Sala" id="Sala" placeholder="Sala" />
    <input class="a" type="text" name="Edifício" id="Edifício" placeholder="Edifício" />
    <input class="a" type="text" name="Cidade" id="Cidade" placeholder="Cidade" />
    <input class="a" type="text" name="País" id="País" placeholder="País" />
  </div>
  <!-- 新增XML文件选择控件 -->
  <input type="file" accept=".xml" onchange="loadData(this)" />
</form>

JavaScript部分 #

function loadData(fileInput) {
  "use strict";
  const file = fileInput.files[0];
  if (!file) return; // 未选择文件时直接返回

  const reader = new FileReader();
  reader.onload = function(e) {
    try {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(e.target.result, 'text/xml');
      
      // 检查XML解析是否出错
      const parseError = xmlDoc.querySelector('parsererror');
      if (parseError) {
        console.error('XML解析失败:', parseError.textContent);
        return;
      }

      const form = document.getElementById('formContainer');
      populateData(form, xmlDoc);
    } catch (err) {
      console.error('处理XML时发生错误:', err);
    }
  };
  reader.onerror = function() {
    console.error('文件读取失败');
  };
  reader.readAsText(file); // 以文本格式读取本地文件
}

function populateData(form, xmlDoc) {
  "use strict";
  const metadataMap = {};
  // 正确选择所有customMetaData节点
  const metadataNodes = xmlDoc.querySelectorAll('customMetaData');
  
  metadataNodes.forEach(node => {
    const keyElement = node.querySelector('key');
    const valueElement = node.querySelector('value');
    if (keyElement && valueElement) {
      const key = keyElement.textContent.trim();
      const value = valueElement.textContent.trim();
      metadataMap[key] = value;
    }
  });

  // 遍历表单内所有带name属性的输入框，填充对应值
  const inputs = form.querySelectorAll('input[name]');
  inputs.forEach(input => {
    if (metadataMap.hasOwnProperty(input.name)) {
      input.value = metadataMap[input.name];
    }
  });
}

关键修改说明 #

1. 改用FileReader读取文件：相比XMLHttpRequest+ObjectURL的方式，FileReader更适合读取本地文件，逻辑更简洁直观。
2. 修正XML解析时机：在文件读取完成后，用e.target.result（文件的纯文本内容）解析XML，确保拿到有效内容。
3. 修复标签选择器：把错误的customMetaDados改为XML中实际存在的customMetaData。
4. 增加错误处理：添加了XML解析错误检查、文件读取失败处理，方便调试排查问题。
5. 精准选择输入元素：直接从表单容器中选择带name属性的输入框，避免遍历无关元素。
6. 移除冗余函数：删掉逻辑混乱且重复的readXML函数，统一用loadData处理文件上传后的所有逻辑。

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