Brijesh Shah Blog

Image preview by javascript

By Brijesh Shah, 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.