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:
• Easy Java Script Code for Sideways Slide show
• JavaScript Code to Display Wait Cursor While Image Loads
• Put Commas in Your Java Script Calculators
• Easy Slide Show Code with Mouseover Pause
• Easy Picture Panning Code
• Easy JavaScript Picture Selector Code
• JavaScript to Generate a Random Number Between X and Y
• Easy Slide Show Code
• Allowing Multiple Selections from Drop-down Select List
• Convert Mixed Number to Decimal

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-2019 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268