This post 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 technique, we need a temporary location where image will be saved and then after permanent saving, you need to transfer another location or database.
Coding
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)
{
// Get Client site full Image path need to be convert into HttpPostedFile
HttpPostedFile file = (HttpPostedFile)imgUpload.PostedFile;
//Use FileStream to convert the image into byte.
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)
{
// Convert the byte into image
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.
0 comments:
Post a Comment