Reader Level:
ARTICLE

Upload and save the images

Posted by Rahul Kumar Saxena Articles | ASP.NET Programming January 07, 2009
This article shows that how can you upload and save your images. How can you show these images on your web form?
  • 0
  • 0
  • 9085
Download Files:
 

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.

COMMENT USING

Trending up