Friday 27 July 2012

Upload Image and show preview without clicking any button manually


Upload Image and show preview without clicking any Button Manually


In .aspx page Directory:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.aspx.cs" Inherits="RadUpload.FileUpload" EnableEventValidation="false" %>

Script


 <script language="javascript">

        function Change(obj) {
            __doPostBack("<%= Button1.ClientID %>", "");
        }
             
    </script>


<asp:UpdatePanel ID="UPanel" runat="server">
            <ContentTemplate>
                <table width="100%">
                    <tr>
                        <td align="center">
                            <img id="imgUploadImage" runat="server" style="height: 200px; width: 200px;" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <asp:FileUpload ID="FileUpload1" runat="server" onchange="Change(this);" />
                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"                Visible="False" />
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>


CodeBehind Page

protected void Button1_Click(object sender, EventArgs e)
        {
            int FileSize = FileUpload1.PostedFile.ContentLength;
            byte[] bytFileBinary = new byte[FileSize];
            FileUpload1.PostedFile.InputStream.Read(bytFileBinary, 0, (int)FileUpload1.PostedFile.ContentLength);
            imgUploadImage.Src = "data:image/png;base64," + Convert.ToBase64String(bytFileBinary);
        }

final Out Put :