Introduction
This tip shows you how to upload the image and preview in ASP.NET (C#) using FileUpload Control without saving the image into web server or database. In this post, I explain how to achieve this kind of information painlessly.
Background
Normally, developer faces the problem to get the full image path from FileUpload control in ASP.NET application. This is the reason normally all the articles and tutorials mention that if you need to preview the image on web browser after uploading, you should first save the image on web server and then show it in image control. In this technique, you need a temporary location where image will be saved and then after permanent saving, you need to transfer another location or database. This will cause overhead on server and developer as well to manage it.
Source Code
Create a new website. Add a FileUpload control, a button, and an image control.
ASPX Code
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Demo._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></title>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr>
<td style="width: 10%">
<asp:Label ID="Label1"
runat="server" Text="Signature" />
</td>
<td>
<asp:FileUpload ID="imgUpload" runat="server" />
<asp:Button runat="server"
ID="btnUpload" Text="Upload"
onclick="btnUpload_Click" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2"
Text="The uploaded Image" runat="server" />
</td>
<td colspan="2">
<img id="imgTemplate" runat="server"
width="200" height="200" />
</td>
</tr>
</table>
</form>
</body>
</html>
Add a button click event for “btnUpload”.
<asp:Button runat="server" ID="btnUpload" Text="Upload"
onclick="btnUpload_Click" />
C# Code
Add System.IO file in code file and paste the following code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace Demo
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnUpload_Click(object sender, EventArgs e)
{
byte[] byteArray = null;
if (imgUpload.PostedFile != null)
{
HttpPostedFile file = (HttpPostedFile)imgUpload.PostedFile;
using (FileStream fs = new FileStream(file.FileName, FileMode.Open, FileAccess.Read))
{
byteArray = new byte[fs.Length];
int iBytesRead = fs.Read(byteArray, 0, (int)fs.Length);
if (byteArray != null && byteArray.Length > 0)
{
string base64String = Convert.ToBase64String(byteArray, 0, byteArray.Length);
imgTemplate.Src = "data:image/png;base64," + base64String;
}
}
}
}
}
}
The important thing is to convert the FileUpload property PostedFile into HttpPostedFile and get the full client site full image path and you can easily use it in Filestream parameter.
Now run the application, upload the image by using upload button, it will show preview it.
