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:
<input type="file" id="input" onchange="loadFile(event)">
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.
More Java Script Code:
• Round a Float to 4 Digits to the Right of the Decimal Point
• Easy Expanding Banner Code
• JavaScript Code to Make Image Wave Like a Flag
• Learn JavaScript Visually
• Easy Slide Show Code With Linked Slides
• JavaScript Cookbook
• Java Script Comparison Operators
• Play Music on Your HTML5 Web Page
• JavaScript Code to Save and Load a Table Using HTML5 Web Storage
• How to Use HTML5 canvas arc and arcTo Functions