使用用户选择的 xml 文件填写表单

Question

部分html表单

<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>

我有一个 html 表单，它能够使用这样的输入值创建一个 XML 文件。 “key”标签是输入的名称，“value”标签是值。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssetInfo xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
<assetSubType>Audio_Video</assetSubType>
<state>importado</state>
<name>transferir (1).jpeg</name>
  <customMetaData>
     <key>Data</key>
     <value>2018-05-21</value>
  </customMetaData>
  <customMetaData>
     <key>Hora</key>
     <value>12:12</value>
  </customMetaData>
  <customMetaData>
     <key>Sala</key>
     <value>sala 2</value>
  </customMetaData>
  <customMetaData>
     <key>Edifício</key>
     <value>casa</value>
  </customMetaData>
  <customMetaData>
     <key>Cidade</key>
     <value>porto</value>
  </customMetaData>
  <customMetaData>
     <key>País</key>
     <value>Portugal</value>
  </customMetaData>
</AssetInfo>

我想用“值”标签内的值填充表单输入。

我尝试这样做，用户选择 xml 文件，它在 xml 文件中搜索“键”和值“标签”，将文本插入存储在这些标签中，然后在表单的所有输入中搜索“ name" = "key" 标签中的文本，并用 "value" 标签中的值填充。

function loadData(fileInput) {
    "use strict";
  var file = fileInput.files[0];
  var fileURL = URL.createObjectURL(file);
  var req = new XMLHttpRequest();
  req.open('GET', fileURL);
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(fileURL, 'text/xml');   

  req.onload = function() { 
    URL.revokeObjectURL(fileURL);
   populateData(fileInput.form, xmlDoc);
  };

  req.onerror = function() {
    URL.revokeObjectURL(fileURL);
    console.log('Error loading XML file.');
  };    
  req.send();
}    

function populateData(form, xmlDoc){ 
    "use strict";
  var root = xmlDoc.documentElement;
  var metadataNodes =root.querySelectorAll("customMetaDados");
    var map={};
    metadataNodes.forEach(function(metadata) {
    var key = metadata.querySelector('key').textContent;
    var value = metadata.querySelector('value').textContent;
    map[key] = value;
  });

    for (var i = 0; i < form.elements.length; i++) {
    var input = form.elements[i];
    if(input.name){ 
        input.value = map[input.name] || '';        
        }
          }
      }    

function readXML(){
    "use strict";
    var xml = new XMLHttpRequest();
    xml.open('GET', 'xml/*', false);
    xml.send();
    var xmlData=xml.responseXML;
    if(!xmlData){
        xmlData=(new DOMParser()).parseFromString(xml.responseText,'text/xml');
        var emp = xml.Data.getElementByTagName("customMetaDados");


        for(var i=0;i<emp.length;i++){
            var value= emp[i].getElementsByTagNAme("value")[i].firstCHild.data;
            input.value=value;
        }
    }
}

Answer 1

至少有两种主要方法可以实现这一点。在 javascritp 中将 XML 转换为 JSON，理论上它是最好的，但我不确定 Convert XML to JSON (and back) using Javascript。但是在我看来，有一种方法很容易实现，而且是你的方法。它在 DOM 中插入 XML 并使用常见的 javascript 方法读取它。这里有一个小例子：

var sMyString = "<AssetInfo><customMetaData><key>País</key><value>Bielorusia</value></customMetaData><customMetaData><key>País</key><value>Portugal</value></customMetaData></AssetInfo>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "text/xml");

//oDOM it's now like document. so:

len = oDOM.getElementsByTagName("value").length;

customerData = [];
for(let i = 0; i<len ; i++){  
  customerData.push(oDOM.getElementsByTagName("value")[i].innerHTML);
  //do whatever with the value
}

console.log(customerData);