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.

#HTML


<!DOCTYPE html>

<html>

<head>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<style>

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

menu, nav, section { display: block; }

</style>

</head>

<body>

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

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

</body>

</html>

#Javascript


function showImagePreview(input) {

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

var reader = new FileReader();

reader.onload = function (e) {

$('#image_preview

.attr('src', e.target.result)

.width(150)

.height(200);

};

reader.readAsDataURL(input.files[0]);

}

}

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
  • del.icio.us
  • Reddit
  • Bloglines
  • LinkedIn
  • YahooMyWeb
  • Facebook
  • Google Bookmarks
  • Mixx
  • MySpace
  • Technorati
  • TwitThis

One Response 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: http://www.oracle.com/javaone/in-en/index.html?pcode=WWMK11024795MPP084&src=7268797&Act=155 ).

Leave a Reply

*

Panorama Theme by Themocracy