Monday, 4 September 2017

Display XML file with Formatting in HTML page using JavaScript and jQuery.

Display XML file with Formatting in HTML page using JavaScript and jQuery


Description:

In this example we explain that how to display XML file with formatting in HTML page using JavaScript and jQuery in asp.net.or how to read XML file and display its content with formatting in HTML page using JavaScript and jQuery. Or how to upload XML File using fileuplaod and display with formatting in HTML page using JavaScript and jQuery.

Here we demonstrate how to populate XML file content in HTML page using JavaScript and jQuery.
Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Display XML file with Formatting in HTML page using JavaScript and jQuery
    </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 () {
            $("#uploadXMLFile").bind("click", function () {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xml)$/;
                if (regex.test($("#fileuploadXMLFile").val().toLowerCase())) {
                    if (typeof (FileReader) != "undefined") {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $("#XMLFileContent").val(e.target.result);
                        }
                        reader.readAsText($("#fileuploadXMLFile")[0].files[0]);
                    } else {
                        alert("This browser does not support HTML5.");
                    }
                } else {
                    alert("Please upload a valid XML file.");
                }
            });
        });
    </script>
    <input type="file" id="fileuploadXMLFile" />
    <input type="button" id="uploadXMLFile" value="uploadXMLFile" />
    <hr />
    <textarea id="XMLFileContent" rows="25" cols="40" readonly="readonly" style="border: none;
        overflow: hidden"></textarea>
</body>
</html>




0 comments:

Post a Comment