The JavaScript FileReader object allows web pages to read the contents of files stored on the user's
computer. Files stored on the user's computer may be selected from a FileList object returned as a
result of the user selecting files using the input element:
Files may also be selected with a drag and drop operation. The <img id="output"> element
allows the FileReader to accept files via drag-n-drop and displays the selected file name.
<script>
function loadFile(event)
{
var input = event.target;
var reader = new FileReader();
reader.onload = function()
{
var text = reader.result;
document.getElementById("showFile").innerText = reader.result;
}
reader.readAsText(input.files[0]);
}
</script>
<div id="showFile" style="width:300px; height:200px; margin:8px; border-style:solid;"></div>
<input type="file" accept="text/plain" onchange="loadFile(event)"><img id="output">
The .readAsText() method reads the contents of the specified file. When finished, the
result attribute contains the contents of the file as a text string. You need to provide
an onload callback function that specifies what should happen when the file read is complete.