Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Preview Image before Upload using Fileupload in Asp.net

Mar 31, 2014
Introduction

Here I will explain how to use
jQuery to preview image before upload in asp.net or show image preview before upload using jQuery in asp.net or preview image before upload using fileupload in asp.net.

Description:
  
In previous article I explained jquery crop image in asp.net using jcrop plugin,
disable right click on image using JQuery, jquery show html content in popup and many articles relating to jQuery, asp.net. Now I will explain how to use jQuery to preview image before upload in asp.net.

To implement this we need to write code as shown below in your aspx page


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Preview Image before upload</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function showimagepreview(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#imgprvw').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)" />
</div>
<img id="imgprvw" alt="uploaded image preview"/>
</form>
</body>
</html>
To check live demo upload image and see the image preview

Live Demo



uploaded image preview

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

24 comments :

Anonymous said...

Thanks for this post sir. sir do you have any idea of taking screenshot of a div which has another div inside it. I will explain you clearly. I am doing a online shirt shopping website. We planned to create a trial room, which means we may upload our photograph and we will drag a shirt over that image. That shirt image is from datalist control. we also wrote code to drag that shirt, resize according to our photograph. so user may feel like wearing the shirt and seeing. now my client needs to take screenshot of the photograph with that shirt. We searched many articles. but no use. Kindly help me.

News said...

how can save this image into database ??

News said...

nice Article I have complete practice of this Image upload next step how to save this image into database
Please Continue it from here

Anonymous said...

@shah this is just to show how we can preview image uploading of file works as normally we do...

Unknown said...

How to Upload Large Amount of data such that 5GB in Asp please help me

Unknown said...

hi sir tanks for very help full solution,
sir, i have a master page and i wants to do it n content page i write the code as you mention above but not to able to view the image in image

Habel Philip said...

Hi Suresh,I'm very thankful for you for your extra ordinary articles which reveals a-z in each examples. Go ahead with this.

Unknown said...

I'm using your code but image i not displayed. any thoghts?

Nka said...

Hello, How To Show EXIF data ?

+ Javascript EXIF Reader - jQuery

Unknown said...

Thanks for your post !
I utilize the code above to run perfectly with Chrome,
But it could not show the picture with IE,
Could you do a favor , Suresh Dasari, thanks !

jits said...

this code work only master page why doesn't work in default page in asp.net

jayachandran said...

not working in internet explorer

Anonymous said...

Solution for internet explorer ?

Anonymous said...

Please how to size the preview image. Thanks

Unknown said...

Hi sir this code is working fine. But I have a problem using this code, please solve it :-

When the page is posted back due to some event the selected image disappears. Could u please solve this...

Unknown said...

Hi sir this code is working fine. But I have a problem using this code, please solve it :-

When the page is posted back due to some event on the page, the image disappears. Could u please solve this...

Anonymous said...

This code does not work in IE9

Unknown said...

Hello ,
When i remove file from file uploader control <img control show same image how can i remove this image from <img src and show default image when fileupload control get empty ..?

Sujeet Kumar Singh said...

Sir It is not working in Internet Explorer. Please suggest the solution. Very urjent sir.

Anonymous said...

its not working in ie9

Unknown said...
This comment has been removed by the author.
Ömer Gökçe said...

thank you :)

Unknown said...

can i know how to control size of div after uploading

Tauhidul Islam said...

How we can do this for three different image uploaded into a web form??

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.