Read Parse and display XML file using JavaScript jQuery and HTML5

In this article I will explain with an example, how to read, parse and display a XML file selected in FileUpload control (HTML File Input) on client side using JavaScript, jQuery and HTML5.

HTML5 allows developers to access the contents of XML files and details using JavaScript and jQuery and hence in browsers that support HTML5 one can easily read the XML file contents.

HTML Markup

The HTML Markup consists of a FileUpload control (HTML File Input) and a HTML Button.

<head>

</head>

<body>

$(function () {

$("#upload").bind("click", function () {

var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xml)$/;

if (regex.test($("#fileUpload").val().toLowerCase())) {

if (typeof (FileReader) != "undefined") {

var reader = new FileReader();

reader.onload = function (e) {

var xmlDoc = $.parseXML(e.target.result);

var customers = $(xmlDoc).find("Customer");

//Create a HTML Table element.

var table = $("<table />");

table[0].border = "1";

//Add the header row.

var row = $(table[0].insertRow(-1));

customers.eq(0).children().each(function () {

var headerCell = $("<th />");

headerCell.html(this.nodeName);

row.append(headerCell);

});

//Add the data rows.

$(customers).each(function () {

row = $(table[0].insertRow(-1));

$(this).children().each(function () {

var cell = $("<td />");

cell.html($(this).text());

row.append(cell);

});

var dvTable = $("#dvTable");

dvTable.html("");

dvTable.append(table);

}

reader.readAsText($("#fileUpload")[0].files[0]);

} else {

alert("This browser does not support HTML5.");

}

} else {

alert("Please upload a valid XML file.");

}

});

</script>

<hr />

</div>

</body>

</html>

Explanation:

Reading the XML File

The XML file is selected in FileUpload control (HTML File Input) and Upload button is clicked. On the click event of the Upload button a JavaScript function is being called.

Inside the function, first a check is performed to verify whether the file is a valid XML or a text file. Then a check is performed to make sure whether the browser supports HTML5 File API.

XML Parsing

The contents of the XML file are read into an XML document and then the specific nodes i.e. Customer are read into a JavaScript object.

Adding the Header Row

The Header Row will be built using the first Node of the XML by looping through the Child Nodes and reading its names and one by one Table TH element is created and appended to the header row using jQuery.

Table insertRow Method

This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.

Adding the Data Rows

A loop is executed over the XML nodes and one by one a Row is created in the HTML Table. Then inside each Row a dynamic cell element is created and appended using jQuery.

Adding the dynamic Table to the Page

Finally the dynamically created table is added to the page by appending it the HTML DIV using jQuery

Note: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.

Screenshot