Image preview by javascript

By , October 13, 2011 5:32 pm

Here I  will  show how to display image preview before uploading to server side.


<!DOCTYPE html>



<script class="jsbin" src=""></script>

<meta charset=utf-8 />

<title>JS Bin</title>

<!--[if IE]>

<script src=""></script>



article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; }




<input type='file' onchange="showImagePreview(this);" />

<img id="image_preview" src="#" alt="your image" />




function showImagePreview(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {









Note: This method is not worked in IE as files property of file field is not supported by IE browser

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Webnews
  • Digg
  • Reddit
  • Bloglines
  • LinkedIn
  • YahooMyWeb
  • Facebook
  • Google Bookmarks
  • Mixx
  • MySpace
  • Technorati
  • TwitThis

2 Responses to “Image preview by javascript”

  1. Rajivdh says:

    JavaOne 2012 is apparently being held at Hyderabad this year as well (3-4 May). They have also started accepting registrations. Check this: ).

  2. Nichole says:

    It’s hard to find your articles in google. I found it on 15 spot, you should build quality backlinks , it will
    help you to increase traffic. I know how to help you, just type in google – k2 seo tips and tricks

Leave a Reply


Panorama Theme by Themocracy