Introduction: Image preview before upload

In this post, we will learn about how to Display Image preview before upload in Asp.net or HTML and Jquery in asp.net using html and javascript.


Description:

In my previous posts I have explained various topics like Get site visitor count in asp.net
Convert generic list to datatable in Asp.Net C#.Net, Abstract Class in C# with Example,
Routing in Asp.Net MVC with Example
,Use of Global.asax in Asp.net
Now in this post, I will explain about Display Image preview before upload in Asp.net or HTML and Jquery with example.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></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) {
                    $('#imgPreview').attr('src', e.target.result);
                }
                filerdr.readAsDataURL(input.files[0]);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Display Image preview before upload</h1>
            <div>
                <input type="file" onchange="showImagePreview(this)" />
                <br />
                <br />
                <img id="imgPreview" alt="Preview image" width="400" />
            </div>
        </div>
    </form>
</body>
</html>
Image preview before upload

Image Preview

I hope you got an idea about how to Display Image preview before actually upload in Asp.net or HTML and Jquery.I would like to have feedback from my blog readers.
Your valuable feedback, question, or comments about this article are always welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *
Email *
Website