Introduction:
In previous article i explained How to bind,upload,download,delete image files from the GridView and jQuery to validate and upload image in asp.net and Drag and drop to upload multiple files like facebook using ajaxfileupload and Maintain image on postback and Resize an image
Description: While
working on asp.net project i got the requirement to preview the image that we
are going to upload before actually uploading the image. So i searched on
internet and found the solution using jQuery that works perfectly for my
requirement.
This
is very common requirement every developer faces. So i have decided to share
this trick with all so that anyone can implement in their project whenever
required. I also suggest to all the developer to implement this functionality
on the pages where there is the file upload functionality so that user can preview
the image before uploading.
Implementation: Let's create an
asp.net web page to check this feature in action.
- Below is the HTML markup of the default.aspx page. You just need to copy and paste in your project.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show image preview before
image upload</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowImagePreview(input) {
if (input.files
&& input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#<%=ImgPrv.ClientID%>').prop('src', e.target.result)
.width(240)
.height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 300px;">
<legend>Show image preview before
image upload</legend>
<div style="text-align: center;">
<asp:Image ID="ImgPrv" Height="150px" Width="240px" runat="server" /><br />
<asp:FileUpload ID="flupImage" runat="server" onchange="ShowImagePreview(this);" />
</div>
</fieldset>
</div>
</form>
</body>
</html>
Note: We are calling the jQuery
function " ShowpImagePreview"
on the "onchange event" of fileupload control so that whenever
user select any image through this control, he can view the selected image in
the asp.net Image control before actually uploading that image.
Now over to you:
" I hope you have got the trick to preview the image while
uploading the image via fileupload control in Asp.Net and If you like my work;
you can appreciate by leaving your comments, hitting Facebook like button,
following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on
stumble upon and subscribing for receiving free updates directly to your inbox
. Stay tuned and stay connected for more technical updates."
23 comments
Click here for commentsBut what to write on code page file ??
ReplyI am using VB
Hi vishant patel..there is no need to write any code for this..But if you want the code to upload file then read the articles..
Replyhttp://www.webcodeexpert.com/2013/03/validate-file-extension-while-uploading.html
http://www.webcodeexpert.com/2013/03/how-to-check-and-validate-file.html
http://www.webcodeexpert.com/2013/03/how-to-validate-file-extension-while.html
http://www.webcodeexpert.com/2013/08/how-to-binduploaddownloaddelete-image.html
can u explain the meaning of above code.its correct but i want to know its meaning.
Replymy id is ashisharora1692@gmail.com
It's fantastic.
ReplyI reached on your page/method after googling many many articles.
Thanks a lot dear.
Bilal
Your welcome Bilal..stay connected and keep reading for more useful articles..
ReplyWow so precise thanks a lot, i got mine working through your code. God bless
Replythanks Ebbydee..i am glad you found this article useful..stay connected and keep reading for more useful updates...:)
ReplyPlz help me i want to upload a multipal images at a time
Replyand doing a slide show
i want for masterpage
ReplyHello Chandru Raj..I have updated the article as per your requirement. Now it will also work for master page..Stay connected and keep reading for more useful updates
ReplyIt worked. Thanks a lot.
ReplyThanks for your valuable feedback..:)
ReplyYou are good. You save me from endless search at a critical period. Thanks man!
ReplyIt is always nice to hear that my article helped anyone..thanks for your valuable comment..:)
ReplyIts Worked Thankx Admin :)
ReplySuperb.....working gud
ReplyThanks for your valuable feedback..
ReplyThanks, you save my life :)
ReplyYour welcome.. Stay connected..:)
ReplyThank you very much.
ReplyYour welcome..Keep reading for more useful articles like this.
ReplyYour welcome..stay connected
ReplyThanks for posting.this code worked for me.
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..