akaban01/JS-file-read.html

## JS-file-read.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>file reader</title>
</head>

<body>

    <h1>Let me read your file data</h1>
    <input id="files" type="file">
    <textarea id="dataToShow"></textarea>
    <div id="list"></div>

    <script>
        // Check for the various File API support.
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            console.log('Great success! All the File APIs are supported. i.e. window.File && window.FileReader && window.FileList && window.Blob');
        } else {
            console.log('The File APIs are not fully supported in this browser.');
        }

        // this function will be triggered when user selects a file
        function handleFileSelect(evt) {
            console.log(evt);
            var file = evt.target.files[0]; // FileList object

            // files is a FileList of File objects. List some properties.
            let reader = new FileReader();
            reader.onload = function (evt) {

                document.getElementById("dataToShow").value = evt.target.result;
            };
            reader.onerror = function (evt) {
                console.error("An error ocurred reading the file",evt);
            };
            reader.readAsText(file, "UTF-8");
        }

        //triggers
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>file reader</title>
	</head>

	<body>

	<h1>Let me read your file data</h1>
	<input id="files" type="file">
	<textarea id="dataToShow"></textarea>
	<div id="list"></div>

	<script>
	// Check for the various File API support.
	if (window.File && window.FileReader && window.FileList && window.Blob) {
	console.log('Great success! All the File APIs are supported. i.e. window.File && window.FileReader && window.FileList && window.Blob');
	} else {
	console.log('The File APIs are not fully supported in this browser.');
	}

	// this function will be triggered when user selects a file
	function handleFileSelect(evt) {
	console.log(evt);
	var file = evt.target.files[0]; // FileList object

	// files is a FileList of File objects. List some properties.
	let reader = new FileReader();
	reader.onload = function (evt) {

	document.getElementById("dataToShow").value = evt.target.result;
	};
	reader.onerror = function (evt) {
	console.error("An error ocurred reading the file",evt);
	};
	reader.readAsText(file, "UTF-8");
	}

	//triggers
	document.getElementById('files').addEventListener('change', handleFileSelect, false);
	</script>
	</body>

	</html>