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

Preview image before upload using jquery in

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

In this article I am going to show how we can show Image preview while uploading images in 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" "">
<html xmlns="">
<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) {
    <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;">
            <td align="center">
                Upload Images
                Select Your File To Upload #:
                <input type="file" name="ImageUpload" id="ImageUpload" onchange="ShowPreview(this)" />
                <asp:Button ID="btnUpload" runat="server" Text="Upload" />
                <asp:Image ID="impPrev" runat="server" Height="200px" />

Now Run the application and select Image to Upload:


Image 1.

After selecting Image you can see your Image.


Image 2.

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