javascript - 加载本地xml文件并显示在html5页面中

我需要将本地xml文件（即c：\ temp \ sample.xml）加载到本地html5页面中并显示结果变量。

这是sample.xml

<?xml version="1.0" encoding="UTF-8"?>
<fe:Invoice>
    <cbc:ProfileID>1.0</cbc:ProfileID>
    <cbc:ID>FV341375</cbc:ID>
    <fe:AccountingCustomerParty>
        <cbc:AdditionalAccountID>2</cbc:AdditionalAccountID>
        <fe:Party>
            <fe:Person>
                <cbc:FirstName>Andres</cbc:FirstName>
            </fe:Person>
        </fe:Party>
    </fe:AccountingCustomerParty>
    <fe:InvoiceLine>
        <cbc:ID>1102347224825331</cbc:ID>
        <cbc:InvoicedQuantity>1</cbc:InvoicedQuantity>
        <fe:Item>
            <cbc:Description>Item Description</cbc:Description>
        </fe:Item>
        <fe:Price>
            <cbc:PriceAmount currencyID="COP">65000.00</cbc:PriceAmount>
        </fe:Price>
    </fe:InvoiceLine>
</fe:Invoice>

我需要打印以下值：


fe：invoice-> cbc：ID
fe：invoice-> fe：AccountingCustomerParty-> fe：Party-> fe：Person-> cbc：FirstName
fe：invoice-> fe：InvoiceLine-> fe：Item-> cbc：Description
fe：invoice-> fe：InvoiceLine-> fe：price-> cbc：PriceAmount


我的html5页面上的结果必须是这样的：

暴力编号：FV341375

名：安德列斯（Andres）

说明：项目说明

价格：65000.00

我如何使用JavaScript做到这一点？

谢谢

最佳答案

尽管此问题不遵循指南的规定，但过于具体，我仍然会回答。

脚步：


从磁盘加载文件。
显示文件结构
解析文件
显示结果


实现方式：

HTML：

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
  parse(contents);
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);

var xmlDoc;
function parse(content)
{
  //Create a parser
  var parser = new DOMParser();
  xmlDoc = parser.parseFromString(content,"text/xml");
  //Parse!
  document.getElementById("ID").innerText = "ID: " + xmlDoc.evaluate("//ID",xmlDoc).iterateNext().textContent;
  document.getElementById("FirstName").innerText = "First Name: " + xmlDoc.evaluate("//FirstName",xmlDoc).iterateNext().textContent;
  document.getElementById("Description").innerText = "Description: " + xmlDoc.evaluate("//Description",xmlDoc).iterateNext().textContent;
  document.getElementById("PriceAmount").innerText = "Price: " + xmlDoc.evaluate("//PriceAmount",xmlDoc).iterateNext().textContent;
}

<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>
<div id="ID">ID: </div>
<div id="FirstName">First Name: </div>
<div id="Description">Description: </div>
<div id="PriceAmount">Price: </div>

我如何实现它们：


我使用Paolo Moretti的代码从磁盘中获取本地文件。
我创建了一个XML文档以使用DOMParser API进行解析
我用XPATH解析了xml
我更新了页面中的值


积分：How to open a local disk file with Javascript?

PS：请问更精确的问题，切记不要让别人为您的项目编写代码。