HTML5 : Show thumbnail preview of image before upload

16 Apr 2012

       Showing Thumbnail preview for the images which user selected to upload will help user to make sure they are selected the right images. Here is the code which can show preview of images as thumbnail for the selected objects. You can try either selecting or drag and drop for previewing the images.

      This code uses the HTML5 features and may not work with old browsers. The two main HTML5 features used by this code are FileReader and Canvas.

You can check the compatibility with the targeted browsers here.


jsfiddle snippet


Please drop a comment if you are facing any issues.
Thank you.


If you find my work helpful, You can buy me a coffee.