kcliu/readfile.html

## readfile.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>

    function loadFile() {
        var input, file, fr;

        if (typeof window.FileReader !== 'function') {
            bodyAppend("p", "The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('fileinput');
        if (!input) {
            bodyAppend("p", "Um, couldn't find the fileinput element.");
        }
        else if (!input.files) {
            bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            bodyAppend("p", "Please select a file before clicking 'Load'");
        }
        else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = receivedText;
            fr.readAsText(file);
        }

        function receivedText() {
            showResult(fr, "Text");
            fr = new FileReader();

        }

    }

    function showResult(fr, label) {
        var markup, result, n, aByte, byteStr;

        markup = [];
        result = fr.result;
        markup.push(result);

        bodyAppend("p", label + " (" + result.length + "):");
        bodyAppend("pre", markup.join(" "));
    }

    function bodyAppend(tagName, innerHTML) {
        var elm;

        elm = document.createElement(tagName);
        elm.innerHTML = innerHTML;
        document.body.appendChild(elm);
    }

</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</form>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<title>Show File Data</title>
	<style type='text/css'>
	body {
	font-family: sans-serif;
	}
	</style>
	<script type='text/javascript'>

	function loadFile() {
	var input, file, fr;

	if (typeof window.FileReader !== 'function') {
	bodyAppend("p", "The file API isn't supported on this browser yet.");
	return;
	}

	input = document.getElementById('fileinput');
	if (!input) {
	bodyAppend("p", "Um, couldn't find the fileinput element.");
	}
	else if (!input.files) {
	bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
	}
	else if (!input.files[0]) {
	bodyAppend("p", "Please select a file before clicking 'Load'");
	}
	else {
	file = input.files[0];
	fr = new FileReader();
	fr.onload = receivedText;
	fr.readAsText(file);
	}

	function receivedText() {
	showResult(fr, "Text");
	fr = new FileReader();

	}

	}

	function showResult(fr, label) {
	var markup, result, n, aByte, byteStr;

	markup = [];
	result = fr.result;
	markup.push(result);

	bodyAppend("p", label + " (" + result.length + "):");
	bodyAppend("pre", markup.join(" "));
	}

	function bodyAppend(tagName, innerHTML) {
	var elm;

	elm = document.createElement(tagName);
	elm.innerHTML = innerHTML;
	document.body.appendChild(elm);
	}

	</script>
	</head>
	<body>
	<form action='#' onsubmit="return false;">
	<input type='file' id='fileinput'>
	<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
	</form>
	</body>
	</html>