Image without using Generic Handler in ASP.Net

In this article I will explain how to display byte array i.e. Binary Data as Image on the web page in ASP.Net Image Control without using Generic handler and also without saving the file on disk.

HTML Markup

<form id="form1" runat="server">

<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="btnUpload" runat="server" Text="Upload"

    onclick="btnUpload_Click" />

<hr />

<asp:Image ID="Image1" Visible = "false" runat="server" Height = "100" Width = "100" />

</form>

Above you will see a FileUpload control to upload the Image File, a Button control to trigger the File upload process and an Image control to display the uploaded image file.

 

Displaying the Byte Array as Image

Below is the code that is being executed when the Upload button is clicked.

C#

 

protected void btnUpload_Click(object sender, EventArgs e)

{

    System.IO.Stream fs = FileUpload1.PostedFile.InputStream;

    System.IO.BinaryReader br = new System.IO.BinaryReader(fs);

    Byte[] bytes = br.ReadBytes((Int32)fs.Length);

    string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

    Image1.ImageUrl = "data:image/png;base64," + base64String;

    Image1.Visible = true;

}