2

Quiero mostrar el contenido del archivo XML que selecciono en el formulario con un input, pero no me funciona.

He probado distintas formas y no doy con la tecla; he probado a que me devuelta el nombre del archivo después de ser elegido y si funciona, pero el contenido no lo consigo.

El código es el siguiente:

<form method="GET" action="" enctype="multipart/form-data" >
    <input type="file" name="archivo"/><br />
    <input type="submit" onclick="loadDoc()" value="Visualizar archivo">
</form>

<br><br>
<table id="demo"></table>

<script>

function loadDoc()
{

    if (window.XMLHttpRequest) {
        // code for modern browsers
        xhttp = new XMLHttpRequest();
    } else {
        // code for old IE browsers
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }


    xhttp.onreadystatechange = function() {

        if(this.readyState == 4 && this.status == 200)
        {

            if(this.responseXML !== null){

                myFuncion(this);    
            }
        }
    };
    xhttp.open("GET","archivo", true);
    xhttp.send();
}


function myFuncion(xml)
{
    //guardo el contenido del archivo en xmlDoc
    var xmlDoc = xml.responseXML;

    //declaro una tabla para mostrar los datos
    var table = "<tr><th>Titulo</th><th>Autor</th></tr>";
    //guardo en la variable X los valores que se encuentren con el Tag Book para recorrer el fichero xml
    var x = xmlDoc.getElementsByTagName("book");

        for (var i = 0; i < x.length; i++) { 

            table += "<tr><td>" +
            x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +
            "</td></tr>";
        }
    document.getElementById("demo").innerHTML = table;
}

</script>

El archivo XML que tengo es este:

<?xml-stylesheet type="text/xsl" href="tabla.xsl">

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
<book category="COOKING">
   <title lang="en">Everyday Italian</title>
   <author>Giada De Laurentiis</author>
   <year>2005</year>
   <price>30.00</price>
</book>
<book category="CHILDREN">
   <title lang="en">Harry Potter</title>
   <author>J K. Rowling</author>
   <year>2005</year>
   <price>29.99</price>
</book>
</bookstore>
2
  • ¿Por qué la etiqueta python?
    – abulafia
    Commented el 8 nov. 2018 a las 21:01
  • jquery es tu amigo
    – cardeol
    Commented el 8 nov. 2018 a las 21:24

1 respuesta 1

1

Estás haciendo un submit innecesario y carente de funcionalidad. Lo único que tienes que hacer es:

  1. Cargar el archivo XML en memoria.
  2. Leer el archivo.
  3. Parsear el contenido del archivo a un document.
  4. Extraer la data del nuevo documento.

Para leer el archivo simplemente basta con crear una instancia de FileReader y usar el método readAsText pasándole como parámetro el Blob que representa el archivo seleccionado.

Para parsear el archivo solo necesitamos instanciar DOMParser y usar el método parseFromString al cual le pasamos dos parámetros: el texto plano y su mime type correspondiente.

Ejemplo completo

function loadDoc(e) {
  const file = e.target.files[0];

  if (!file) {
    throw new Error('You need to choose an XML file first')
    alert('You need to choose an XML file first')
    return false
  }

  readDoc(file).then(parseDoc).then(showDocInTable).catch(onError)
}

function readDoc(file) {
  const reader = new FileReader()

  return new Promise((ok) => {
    reader.readAsText(file)
    reader.onload = function() {
      ok(reader.result)
    }
  })
}

function parseDoc(rawXML) {
  const parser = new DOMParser()
  const xml = parser.parseFromString(rawXML, 'text/html')
  return xml
}

function showDocInTable(xml) {
  const table = document.querySelector('#bookTable > tbody')
  const datasource = xml.querySelector('bookstore')
  const books = datasource.querySelectorAll('book')

  table.removeChild(table.children[0])

  Array.from(books).map((book, i) => {
    const tr = document.createElement('tr')
    const title = tagToData(book.querySelector('title'))
    const author = tagToData(book.querySelector('author'))
    const year = tagToData(book.querySelector('year'))
    const price = tagToData(book.querySelector('price'))

    tr.append(title, author, year, price)
    table.appendChild(tr)
  })
}

function tagToData(tag) {
  const td = document.createElement('td')
  td.textContent = tag.textContent
  return td
}

function onError(reason) {
  console.error(reason)
}
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif, arial;
  padding: 50px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 0 20px;
}

#bookForm {
  align-items: center;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  padding: 8px;
}

#bookForm input {
  display: none;
}

#bookForm label {
  background-color: #00AF3F;
  border-radius: 25px;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 200;
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
}

#bookTable {
  border-collapse: collapse;
  border: 1px solid #e5e5e5;
}

#bookTable td,
#bookTable th {
  color: #444;
  font-size: 14px;
  padding: 15px 15px;
}

#bookTable thead {
  border-bottom: 2px solid #ddd;
}

#bookTable thead th {
  background-color: #f5f5f5;
}

#bookTable tbody {
  padding: 10px;
}

#bookTable tbody tr:not(:last-child) {
  border-bottom: 1px solid #eee;
}

#bookTable tbody td:not(:last-child) {
  border-right: 1px solid #eee;
}
<div id="bookForm">
  <input id="books" type="file" onChange="loadDoc(event)">
  <label for="books">Cargar archivo</label>
</div>

<table id="bookTable">
  <thead>
    <tr>
      <th>Autor</th>
      <th>Título</th>
      <th>Año</th>
      <th>Precio</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td colspan="4" style="text-align: center">Sin registros</td>
    </tr>
  </tbody>
</table>

2
  • Muchisimas gracias por la ayuda! ¿Como puedo cargar el archivo en memoria?, he puesto: <input type="file" name="archivo"> para hacer la selección del archivo, pero aun así no me funciona. El codigo que me has escrito funciona de maravilla y es el funcionamiento que deseo. ¿Es necesario tener el form ? Gracias de antemano.
    – jma
    Commented el 9 nov. 2018 a las 10:35
  • Vale! ya he conseguido que me funcione, tuve un pequeño despiste. Mil Gracias de nuevo.
    – jma
    Commented el 9 nov. 2018 a las 11:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.