Home » Tutorials » JavaScript » Create Thumbnail Preview of Images Using HTML5 API

Create Thumbnail Preview of Images Using HTML5 API

Create Thumbnail Preview of Images Using HTML5 API

  • Stumble it!
  • Share

Now, with the help of HTML5, web developer can create thumbnail preview of images that a user may wish to upload to remote server. You can check out the demo, if you are still not clear about it.

View Demo

Getting Started

The HTML5 API that we are going to use is ‘File API’. This API provide several interfaces for us to access a file from local file system.

  • File: Provides information such as, name of the file, size, and mimetype.
  • Blob: Which allows slice a file into byte ranges.
  • FileList: A collection / array of file objects.
  • FileReader: An interface can be used to read the information from the the images.

In this tutorial, we are going to mainly cover interface of FileReader at the moment, and we will talk about the rest in the upcoming tutorial.

Ok, before we start, the first thing we need to do is to check whether the browser has the capability to support FileReader:

<script type="text/javascript">
if (window.FileReader) {
  //then your code goes here
} else {
  alert('This browser does not support FileReader');
}
</script>

After that, let’s insert the file upload and the output of thumbnail into the HTML structure as shown below:

<input type="file" id="files" />
<output id="list"></output>

The next thing is to add an event listener, to run a thumbnail generating function every time, when we re-selecting new images to upload.

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Now, let’s construct the thumbnail generating function – ‘handleFileSelect’.

function handleFileSelect(evt) {
	var files = evt.target.files;
	var f = files[0];
	var reader = new FileReader();
	
	  reader.onload = (function(theFile) {
		return function(e) {
		  document.getElementById('list').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50" />'].join('');
		};
	  })(f);
	  
	  reader.readAsDataURL(f);
}

As you seen above, we captured the targeted file upload via the parameters ‘evt‘ sent from event listener that we defined earlier, and accessing the information of targeted images via FileReader, and lastly calls reader.readAsDataURL() render the image into thumbnail by setting the ‘src’ attribute to a data URL.

That’s it!

View Demo


  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes
  • Create Sequential Animations in jQuery

  • Noe

    I am getting Uncaght Type Error: Cannot call method ‘addEventListener’ of null, i copy exactly what you do! Is there any js extra??

    • http://www.onlywebpro.com onlyWebPro

      Hi Noe,

      Thanks for reading my post :)

      For your problem, I guess it is because the script runs before the before the output elements are rendered, so please make sure you have:

      - Put the scripts in the bottom of the page / After “”.

  • Andrew

    I’ve combined your great work above with “jquery.fileinput.js” – they make a great combination. Thank you!

    • http://www.onlywebpro.com onlyWebPro

      Hi Andrew,

      Glad to heard that!

      Regards,
      onlywebpro

    • John

      Andrew. I’m looking for a similar solution that styles the file input and also displays a thumbnail. Do you have a demo?

  • http://www.facebook.com/mohamad.habibi Mohamad Habibi

    A great resource indeed ! I’d like to know how to perform real upload to server after this ? Thank you

  • http://www.facebook.com/travdahl Travis Dahl

    This is great! I have it working on a iphone web app. The only problem I’ve encountered is the orientation. it doesnt seem to rotate it correctly based on exif data. Anybody run into this? They always preview landscape even if they were taken in portrait

  • Nikhil

    nice info…

    here i found one more post which creates thumbnail. and only thumbnail is gets shown or saved when we try to save or view it..

    http://www.iminfo.in/post/how-to-create-thumbnail-image-using-html5-canvas-and-javascript

    • http://www.onlywebpro.com onlyWebPro

      Wow! Thanks for sharing! :)

Android, iOS Development Tutorials