Загрузите локальный файл 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 должен быть примерно таким:

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

Имя: Андрес

Описание: Описание предмета

Цена: 65000.00

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

Благодарность

javascript html

18.12.2018 05:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 941

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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();

Больше информации:

18.12.2018 06:05

Ответ принят как подходящий

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

Шаги:

Загрузить файл с диска.
Показать файловую структуру
Разобрать файл
Показать результаты

Выполнение:

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>

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