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>