Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Preview image before upload using jquery in asp.net

Article:
Viewed:  1167 
Posted On:  09/10/2014 05:38:12 
How we can show preview of image before upload in asp.net using jQuery ? 

In this article I am going to show how we can show Image preview while uploading images in asp.net using jQuery.

Below is my jQuery script and aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Preview Image While Upload</title>
 
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        function ShowPreview(input) {
            if (input.files && input.files[0]) {
                var ImageDir = new FileReader();
                ImageDir.onload = function(e) {
                    $('#impPrev').attr('src', e.target.result);
                }
                ImageDir.readAsDataURL(input.files[0]);
            }
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="10" cellspacing="4" width="70%" align="center" style="border: Solid 10px Green;
        font-weight: bold; font-size: 16pt; background-color: Skyblue; color: Blue;">
        <tr>
            <td align="center">
                Upload Images
            </td>
        </tr>
        <tr>
            <td>
                Select Your File To Upload #:
                <input type="file" name="ImageUpload" id="ImageUpload" onchange="ShowPreview(this)" />
                <asp:Button ID="btnUpload" runat="server" Text="Upload" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Image ID="impPrev" runat="server" Height="200px" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Now Run the application and select Image to Upload:

1.png

Image 1.

After selecting Image you can see your Image.

2.png

Image 2.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us