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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(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>
    <input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" />
    <hr />
    <div id="dvTable">
    </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
Read, Parse and display XML file using JavaScript, jQuery and HTML5
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads