Question

尝试读取用户插入的xml文件以填充html表单。需要将xml文件转换为字符串var然后创建一个xmlDoc元素并读取该文件以将表单的输入名称与插入xml文件标记中的值进行比较＆＃34; key＆＃34;。

function readFile(event) {
        "use strict";
      document.body.textContent = event.target.result;
      console.log(event.target.result);
        var form=document.getElementById("XmlForm");
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(event.target.result, 'text/xml');
        populateData(form,xmlDoc);
    }

    function changeFile() {
        "use strict";
        var input=document.getElementById("fileChooser");
      var file = input.file;
      var reader = new FileReader();
      reader.addEventListener('load', readFile);
      reader.readAsText(file);
    }

    function populateData(form, xmlDom){ 
    "use strict";
    var root = xmlDom.documentElement;
    var metadataNodes = root.querySelectorAll('customMetaData');
    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] || '';     
        }
      }
    }

用户插入的xml文件的例子。始终使用此标签。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssetInfo xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
<assetSubType>undefined</assetSubType>
<state>importado</state>
<name>happyrock.jpg</name>
  <customMetaData>
     <key>Data</key>
     <value>2018-06-04</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>Labruge</value>
  </customMetaData>
  <customMetaData>
     <key>País</key>
     <value>portugal</value>
  </customMetaData>
</AssetInfo>

部分html表单试图填充xml文件

<form id="XmlForm" name="xmlForm" action="" method="post">

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

Answer 1

两件事，首先是文件输入中的文件是通过files属性访问的，而不是file。其次，你有一行代码可以消除你的表单，我已经注释掉了。

function readFile(event) {
        "use strict";
        //document.body.textContent = event.target.result; // <-- here
        //console.log(event.target.result);
        var form=document.getElementById("XmlForm");
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(event.target.result, 'text/xml');
        populateData(form,xmlDoc);
    }

    function changeFile() {
        "use strict";
        var input=document.getElementById("fileChooser");
      var file = input.files[0];  //<-- here
      var reader = new FileReader();
      reader.addEventListener('load', readFile);
      reader.readAsText(file);
    }

    function populateData(form, xmlDom){ 
    "use strict";
    var root = xmlDom.documentElement;
    var metadataNodes = root.querySelectorAll('customMetaData');
    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] || '';     
        }
      }
    } 
document.addEventListener('DOMContentLoaded', function(){
  document.querySelector('[type=file]').onchange = changeFile;
  
});

<form id="XmlForm" name="xmlForm" action="" method="post">

    <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>
</form>
<input type=file id=fileChooser>

使用用户插入的xml文件填充html表单

1 个答案: