Загрузите локальный файл XML и покажите на странице html5

Question

Мне нужно загрузить локальный 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: Описание

• fe: invoice-> fe: InvoiceLine -> fe: price -> cbc: PriceAmount

результат на моей html5-странице должен быть чем-токак это:

Идентификатор Invioce: FV341375

Имя: Andres

Описание: Описание товара

Цена: 65000,00

Как я могу сделать это с помощью JavaScript?

спасибо

Answer 1

Хотя этот вопрос НЕ соответствует указаниям по его отправке и является слишком конкретным, я все равно отвечу на него.

Шаги:

1. Загрузка файла с диска.
2. Показать структуру файла
3. Разобрать файл
4. Показать результаты

Реализация:

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

Contents of the file:

ID: Имя: Описание: Цена:

Как я их реализовал:

1. Я использовал код Паоло Моретти, чтобы получить локальный файл с диска.
2. Я создал XML-документ для анализа с использованием API DOMParser
3. Я проанализировал XML с помощью XPATH
4. Я обновил значения на странице

КРЕДИТЫ: Как открыть файл на локальном диске с помощью Javascript?

PS: Пожалуйста, задавайте более точные вопросы и не забудьте попросить кого-нибудь кодировать ваш проект.

Answer 2

Вы можете сделать запрос XMLHttpRequest, также известный как AJAX. Этот вопрос еще немного об этом говорит и рекомендует использовать среду AJAX для решения "проблемы совместимости".

Вот как это будет выглядеть.

var client = new XMLHttpRequest();
client.open('GET', 'c:\temp\sample.xml');
client.onreadystatechange = function() {
   var response = client.responseText,
       parser = new DOMParser(),
       xmlDoc = parser.parseFromString(response,"text/xml");

   //use the xml Doc however you want.
}
client.send();

Подробнееинформация:

• DOMParser
• XMLHttpRequest