For my AJAX exercise, I need to use a local file named "ledevoir.xml" that is stored on my PC. My program requires me to select this file. However, when I run the program and choose the ledevoir.xml file locally, I encounter the following error:
Error: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
Below is the code snippet I am using:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example AJAX</title>
<script language="JavaScript">
function displayTitles(doc) {
titles = doc.getElementsByTagName("title");
elementol = document.createElement("ol");
var length = titles.length;
for ( i = 0; i < length ; ++i) {
elementli = document.createElement("li");
elementli.appendChild(document.createTextNode(titles[i].firstChild.nodeValue));
elementol.appendChild(elementli);
}
body = document.getElementsByTagName("body").item(0);
body.appendChild(elementol);
}
function loadDocument(file) {
var fileReader = new FileReader();
fileReader.onload = function(evt) {
var doc = new DOMParser().parseFromString(this.result, 'application/xml');
displayTitles(doc);
}
fileReader.readAsText(file);
}
</script>
</head>
<body>
<p>Retrieve and display the latest news from le devoir: </p>
<input type="file" onchange="loadDocument(this.files)" ></input>
</body>
</html>
I need help in understanding and resolving this error. Can anyone assist me with this issue?