Friday, September 19, 2014

How to upload Image and Preview it Dynamically without Saving it


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.
  • Blogger Comments
  • Facebook Comments

0 comments:

Item Reviewed: How to upload Image and Preview it Dynamically without Saving it Rating: 5 Reviewed By: Unknown