Here by this article we learn how to use FileUploadControl
to upload Images in a folder under your web project and show them in a DataList
control by using image control under ItemTemplate.
First-
In the Default.aspx page create a label, FileUploadControl;
button and a DataList Control then Under ItemTemplate add an image control…
Default.aspx
<%@ 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>Upload
Control:DataList</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lbl" runat="server">Please upload your image...</asp:Label>
<br />
<asp:FileUpload ID="fileupload" runat="server" Width="273px" />
<br />
<br />
<asp:Button ID ="btnadd" runat="server" Text="Add Image" OnClick="btnadd_Click" />
<hr />
<asp:DataList ID="dl" runat="server" Height="123px" RepeatColumns="2" Width="97px" >
<ItemTemplate>
<asp:Image ID="img" runat="server" Width="200px" ImageUrl='<%#
Eval("Name", "~/UploadedFiles/{0}") %>' />
<br />
<%#Eval("Name") %>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Second:
Now add this C# code for doing all the activities…
Default.aspx.cs
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 btnadd_Click(object
sender, EventArgs e)
{
if
(fileupload.HasFile)
{
if
(CheckFileType(fileupload.FileName))
{
string
filepath = "~/UploadedFiles/" +
fileupload.FileName;
fileupload.SaveAs(MapPath(filepath));
}
}
}
bool
CheckFileType(string fileName)
{
string
ext = Path.GetExtension(fileName);
switch
(ext.ToLower())
{
case
".gif":
return
true;
case
".png":
return
true;
case
".jpg":
return
true;
case
".jpeg":
return true;
default:
return
false;
}
}
void
Page_PreRender()
{
string
upFolder = MapPath("~/UploadedFiles/");
DirectoryInfo
dir = new DirectoryInfo(upFolder);
dl.DataSource = dir.GetFiles();
dl.DataBind();
}
}
Declaration:
Here is a function named CheckFileType using for checking the file type which we are going
to upload
This fuction allows only four types of image files if there
is another type it will trow error, so this is for restriction.
btnadd_Click is
using to show the images in imagecontrol.
HasFile is using
to check there is there any file uploaded or not.
SaveAs enables you to save the uploaded file to the file system.
FileName—Enables you to get the name of the uploaded file.
Here we used _
<asp:Image ID="img" runat="server"
Width="200px"
ImageUrl='<%#
Eval("Name", "~/UploadedFiles/{0}") %>' />
If you don’t specify
the Width then the output would look bad, because images show in real size but
now every uploaded image show in 200px width.
Another point to
learn is UploadedFiles this is a folder created in Solution Explorer in
current website
When you click the
btnadd button that image will save in UploadedFiles folder its good because we
don’t have to learn the path if we save this in system folder.
![Uploadcontrol with datalist.JPG]()
Conclusion:
Here we learn how to
save images in folder under project folder, how to use imagecontrol in DataList
control to show images.
Reference: This article is created by using the help
of ASP.NET 3.5 Unleashed by Stephen Walther.
IF you want help
regarding this article feel free to contact me I will be happy to assist you...