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.
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
|
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 Email
|
|||
24 comments :
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.
how can save this image into database ??
nice Article I have complete practice of this Image upload next step how to save this image into database
Please Continue it from here
@shah this is just to show how we can preview image uploading of file works as normally we do...
How to Upload Large Amount of data such that 5GB in Asp please help me
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
Hi Suresh,I'm very thankful for you for your extra ordinary articles which reveals a-z in each examples. Go ahead with this.
I'm using your code but image i not displayed. any thoghts?
Hello, How To Show EXIF data ?
+ Javascript EXIF Reader - jQuery
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 !
this code work only master page why doesn't work in default page in asp.net
not working in internet explorer
Solution for internet explorer ?
Please how to size the preview image. Thanks
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...
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...
This code does not work in IE9
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 ..?
Sir It is not working in Internet Explorer. Please suggest the solution. Very urjent sir.
its not working in ie9
thank you :)
can i know how to control size of div after uploading
How we can do this for three different image uploaded into a web form??
Note: Only a member of this blog may post a comment.