Read text from file dropped to browser with FileReader object
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read Text</title>
<style>
div {/*from www . ja v a 2 s .c o m*/
margin-top: 30px;
border: solid 1px black;
padding: 5px;
}
</style>
<script>
function processFiles(files) {
let file = files[0];
let reader = new FileReader();
reader.onload = function (e) {
// When this event firest, the data is ready.
// Copy it to a <div> on the page.
let output = document.getElementById("fileOutput");
output.textContent = e.target.result;
};
reader.readAsText(file);
}
function showFileInput() {
let fileInput = document.getElementById("fileInput");
fileInput.click();
}
</script>
</head>
<body>
<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)">
<div id="fileOutput"></div>
</body>
</html>
Related Topics