Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

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.

More Java Script Code:
• JavaScript 24-Hour Trainer
• Use JavaScript parseInt() and parseFloat() to Convert Strings to Numbers
• Easy Java Script Butterfly Animation
• Create a Mouse Click Sound Effect
• Calculators for Your Web Site : Body Mass Index
• Web Site Menus : Which Section Am I In?
• Date Picker For Your Web Site
• HTML5 Canvas lineCap and lineJoin Attributes
• Using the Java Script Date Object
• Creating Basic Java Script Functions

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268