FileReader, loading an image in a webpage

FileReader allows to access the local file system and load documents with JavaScript.

This completes the <input type="file"> for selecting local file, as this tag can only provide the content of this file to a script on the server, with the form data.

Compatibility test

The current browser recognizes it the File API,  which includes the FileReader object?

Result

Source code of the test:

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) 
  document.write("<b>File API supported.</b>");
else
  document.write('<i>File API not supported by this browser.</i>');
</script>

Reading a text file on the local system

This demo allows you to load a text file on your computer and display the content on the page.
The text can contain HTML code, but you must extract the contents of <body> from the page code to insert it into another page. See how it is done in the use of Ajax to load an HTML page.

Source code: 

<input type="file" id="filebrowsed">

<script>
function readerHandler(e2) 
{ 
  var store = document.getElementById('storage');
  store.innerHTML=e2.target.result.split("\n").join("<br>"); 
}

function readfile(e1)
{
  var fileobj = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = readerHandler;  
  fr.readAsText(fileobj); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
}
</script>

Loading and displaying the text is performed with the following steps:

  1. Adding an event handler to the tag <input type="file">.
    It's done at loading of the page by a function assigned to window.onload.
  2. A listener is implemented, in this case the function readfile.
    It creates a FileReader object, adds an event handler associated with the attribute onload of this object.
    It is activated when the file is loaded into memory.
    The readAsText method loads the file.
  3. The readerHandler event handler has for parameter an event named e2 which has in attribute contents of the file.
    This content is retrieved by e2.target.result.

We see that a few lines of code is enough to achieve the desired result.

Loading an image in a web page

Using only JavaScript and the FileReader object, we can allow the user to load images into an application.
For example it can load a photo to test a pair of glasses without affecting his private life because the picture is not loaded on the server, but only in the browser.

Your image here

HTML code:

<input type="file" id="getimage">

<fieldset><legend>Your image here</legend>
    <div  id="imgstore"></div>
</fieldset>

JavaScript code:

<script>
function imageHandler(e2) 
{ 
  var store = document.getElementById('imgstore');
  store.innerHTML='<img src="' + e2.target.result +'">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
  var y = document.getElementById("getimage");
  y.addEventListener('change', loadimage, false);
}
</script>

The only difference with the previous example is that the readAsText method is replaced by readAsDataURL.
It is also required that we create a <img> tag to include the image in the page.

Function names were changed to allow both demos coexist in the same page, it is the only reason. I also brings together the creations of the initial event handlers in a single function to associate it with window.onload.

We still see that with FileReader, loading an image into a page without going through the server is very simple.

© 2012 Xul.fr