Show image preview before uploading through asp.net fileupload control using jQuery

display image preview before uploading image through fileupload control in asp.netIntroduction: In this article i am going to share the trick to show the preview of the image before uploading the image through fileupload control in asp.net.



DescriptionWhile 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."
Previous
Next Post »

23 comments

Click here for comments
March 14, 2014 ×

But what to write on code page file ??
I am using VB

Reply
avatar
March 17, 2014 ×

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..
http://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

Reply
avatar
Unknown
admin
June 09, 2014 ×

can u explain the meaning of above code.its correct but i want to know its meaning.
my id is ashisharora1692@gmail.com

Reply
avatar
Anonymous
admin
July 09, 2014 ×

It's fantastic.
I reached on your page/method after googling many many articles.

Thanks a lot dear.
Bilal

Reply
avatar
July 10, 2014 ×

Your welcome Bilal..stay connected and keep reading for more useful articles..

Reply
avatar
Ebbydee
admin
August 02, 2014 ×

Wow so precise thanks a lot, i got mine working through your code. God bless

Reply
avatar
August 05, 2014 ×

thanks Ebbydee..i am glad you found this article useful..stay connected and keep reading for more useful updates...:)

Reply
avatar
Unknown
admin
January 08, 2015 ×

Plz help me i want to upload a multipal images at a time
and doing a slide show

Reply
avatar
PondyNews
admin
April 30, 2015 ×

i want for masterpage

Reply
avatar
May 01, 2015 ×

Hello 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

Reply
avatar
Anonymous
admin
June 12, 2015 ×

It worked. Thanks a lot.

Reply
avatar
June 16, 2015 ×

Thanks for your valuable feedback..:)

Reply
avatar
Anonymous
admin
July 24, 2015 ×

You are good. You save me from endless search at a critical period. Thanks man!

Reply
avatar
July 25, 2015 ×

It is always nice to hear that my article helped anyone..thanks for your valuable comment..:)

Reply
avatar
Mouzam
admin
August 20, 2015 ×

Its Worked Thankx Admin :)

Reply
avatar
Anonymous
admin
October 02, 2015 ×

Superb.....working gud

Reply
avatar
October 04, 2015 ×

Thanks for your valuable feedback..

Reply
avatar
Anonymous
admin
November 13, 2015 ×

Thanks, you save my life :)

Reply
avatar
November 20, 2015 ×

Your welcome.. Stay connected..:)

Reply
avatar
Unknown
admin
September 11, 2016 ×

Thank you very much.

Reply
avatar
October 14, 2016 ×

Your welcome..Keep reading for more useful articles like this.

Reply
avatar
October 14, 2016 ×

Your welcome..stay connected

Reply
avatar
Unknown
admin
November 20, 2017 ×

Thanks for posting.this code worked for me.

Reply
avatar

If 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..