Homework SourseUsing HTML CSS and JavaScript Input a userspecified text fil
Using HTML, CSS, and JavaScript, Input a user-specified text file (i.e., one with suffix .txt) and display it in a scrollable textbox. Allow the user to toggle a checkbox for case sensitivity; when case-sensitivity is on, the text is displayed in its original format, but when case sensitivity is off, the text is displayed completely in lower-case.
Solution
FileUpload.html
<!DOCTYPE html>
<html>
<head>
<meta charset=\"ISO-8859-1\">
<title>Insert title here</title>
<script type=\"text/javascript\">
var output=\"\"; //Global var
//Upload function
function upload() {
var fileUpload = document.getElementById(\"fileUpload\");
//Regex to check if the file is txt file
var regex = /^([a-zA-Z0-9\\s_\\\\.\\-:])+(.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
//Check if FileReader present
if (typeof (FileReader) != \"undefined\") {
var reader = new FileReader();
reader.onload = function (e) {
output = e.target.result;
displayContents();
};
//Read as Text
reader.readAsText(fileUpload.files[0]);
} else {
alert(\"This browser does not support HTML5.\");
}
} else {
alert(\"Please upload a valid Text file.\");
}
}
//Function to display contents of text file as original or lower-case depending upon checkbox
function displayContents() {
var el = document.getElementById(\'dvTxt\');
var txt = output;
if(document.getElementById(\'caseCheck\').checked){
el.innerHTML = txt;
}else{
el.innerHTML = txt.toLowerCase();
}
}
</script>
<style type=\"text/css\">
/* Scrollable Text Box CSS */
.scrollabletextbox {
height:300px;
width:600px;
overflow:scroll;
}
</style>
</head>
<body>
<input type=\"file\" id=\"fileUpload\" />
<input type=\"button\" value=\"Upload\" onclick=\"upload()\" />
<input type=\"checkbox\" id=\"caseCheck\" value=\"Toggle Checkbox\" onclick=\"displayContents()\"><label for=\"caseCheck\">Toggle Case</label>
<hr />
<textarea id=\"dvTxt\" class=\"scrollabletextbox\" name=\"Text\"></textarea>
</body>
</html>
