select_localfile.html

<!DOCTYPE html>
<html>
	<head>
	<script src="jquery-1.12.0.min.js"></script>
	</head>
	<body>
		<!-- with input that accepts one file -->
		<input id="the-xml-file-input" type="file">

		<script>
  		//this function is called when the input loads an image
		function renderImage(file)
		{
			var reader = new FileReader();
			reader.onload = function(event){
			}
    		//when the file is read it triggers the onload event above.
			reader.readAsDataURL(file);
			getXmlString(file)

		}
		
		function getXmlString(file) 
		{
  			if (window.ActiveXObject) { return xml.xml; }
  			return new XMLSerializer().serializeToString(file);
		}
		
 
		$( "#the-xml-file-input" ).change(function() {
		console.log("xml file has been chosen")
		//grab the first file in the fileList
		//in this example we are only loading one file.
		console.log(this.files[0].size)
		renderImage(this.files[0])
		});

		//alert(getXmlString(this.files[0]));
 
	</script>
	</body>
</html>