Scroll To Top
Reader Level:
Article
ASP.NET

Upload and save the images

By Rahul Saxena on Jan 07, 2009
This article shows that how can you upload and save your images. How can you show these images on your web form?

This article shows that how can you upload the images and show them on page in a DataList. The uploaded images will save in a folder in your system.
 
 

The MyAlbum.aspx code is:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_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>My Album</title>

</head>

  <body>

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

     <div>

      <table cellpadding="0" cellspacing="0" width="90%" border="4" align="center">

       <tr><td align="center">

         <br />

            <asp:Label ID="lblMyAlbum" Text="My Album" ForeColor="Blue"

                 Font-Bold="true" Font-Size="14pt" runat="server">

            </asp:Label>

              <br /><br />

            <asp:Label ID="lblImageFile" runat="server" AssociatedControlID="UpImage"

                  Text="Image File"> </asp:Label>

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

            <asp:Button ID="btnAdd" Text="Add An Image" runat="server" OnClick="btnAdd_Click" />

            <br /><br />

          

            <asp:DataList ID="dlstImage" RepeatColumns="4" runat="server">

            <ItemTemplate>

            <asp:Image ID="Image1" ImageUrl='<%#Eval("Name","~/UploadImages/{0}") %>' Width="200px"

                runat="server" BorderColor="#006600" />

               <br />             

            </ItemTemplate>

           </asp:DataList>

        </td></tr>

      </table>

    </div>

  </form>

</body>

</html>


The Album.aspx.cs code is:

 

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

 

 

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

 

    protected void Page_Prerender(object sender, EventArgs e)

    {

        string UpFolder = Server.MapPath("~/UploadImages/");

        DirectoryInfo dir = new DirectoryInfo(UpFolder);

        dlstImage.DataSource = dir.GetFiles();

        dlstImage.DataBind();      

    }

 

    protected void btnAdd_Click(object sender, EventArgs e)

    {

        if (UpImage.HasFile)

        {

            if (CheckFileType(UpImage.FileName))

            {

                string FilePath = "~/UploadImages/" + UpImage.FileName;

                UpImage.SaveAs(Server.MapPath(FilePath));

            }

        }

    }

 

    public bool CheckFileType(string FileName)

    {

        string Ext = Path.GetExtension(FileName);

        switch(Ext.ToLower())

        {

            case ".gif" :

                return true ;

                break;

            case ".JPEG":

                return true;

                break;

            case ".JPG":

                return true;

                break;

            case ".png":

                return true;

                break;

              default:

                return false;

                break;

        }

    }

}


When user run the application and add images then the page will look like this:

Image1.jpg

Figure 1: My Images.