Menu
Easy JavaScript FileReader Code

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.


Learn more at amazon.com

More Java Script Code:
• Java Script Random Password Generator
• JavaScript to Set Checkbox to Readonly
• Creating Java Script Dynamic or anonymous Functions at Runtime
• Basic State Machines
• Round a Float to 4 Digits to the Right of the Decimal Point
• Disable IE8 Accelerators on Your Website
• Easy Code to Add Mouse Trails to Your Webpage
• HTML5 Canvas Drag-and-Drop
• Using the Java Script Date Object
• Synchronous and Asynchronous Script Loading