Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

how to bind or display images from folder to datalist using asp.net or how to insert images into folder and display images from folder to datalist using asp.net

May 1, 2011
Introduction

Here I will explain how insert images into folder and how to bind the images to datalist using asp.net.

Description:

In previous post I explained clearly how to bind images from folder to gridview . Now I will explain how to save images into folder and how we can bind that images to datalist using asp.net. It’s very easy to store images in folder and binding that images to datalist. For that first create one new website after that right click on that website select New Folder give name as Images because here I am using same name if you want to use another name you need to change the name in code also after completion of adding Images folder to your website Design your aspx page like this

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind Images to Datalist from folder</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btnsave" runat="server" Text="Upload" onclick="btnsave_Click" />
</div>
<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server" />
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
</form>
</body>
</html>
After that add using System.IO and using System.Collections namespaces and write the following code in code behind


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
DirectoryInfo dir = new DirectoryInfo(MapPath("Images"));
FileInfo[] files = dir.GetFiles();
ArrayList listItems = new ArrayList();
foreach (FileInfo info in files)
{
listItems.Add(info);
}
dtlist.DataSource = listItems;
dtlist.DataBind();

}
protected void btnsave_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileupload1.PostedFile.FileName);
fileupload1.SaveAs(Server.MapPath("Images/" + filename));
BindDataList();
}
Demo

Download sample code attached



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

42 comments :

Anonymous said...

Thank you so much, spent the best part of 8 or 9 hours trying to acheive this!

Krunal Patel said...

i have try to delete image using linkbutton but i can't delete in the list plz help ..

Anonymous said...

Hi I am trying to do the samething but using Image button instead but have no luck to have the image display. Please help. Below is my code:
ImageUrl ='<%#Eval("AdGraphic", "~/AdsFiles{0}") %>'

Anonymous said...

Sorry, Nevermind after I posted the above message and I founded out that I missed the / right after the image folder's name. Here is the correct one: ImageUrl ='<%#Eval("AdGraphic", "~/AdsFiles/{0}") %>'

Thank you!

Anonymous said...

What's the meaning of "Name" in the
ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' ?

vinay said...

its really good

Anonymous said...

how to bind an image using image button.........

Aravindraj said...

thanks

Bhavik Dharaiya said...

Hi. This is really good and this article solved my many issues.

But can you guide me,
How to save images in Folder through web-services and bind it again from web-services.

Please Help me.

Anonymous said...

how to use Data Pager Control First, Last, Next, Previous properties in any Data Control

Anonymous said...

how to delete selected image from datalist in .aspx page( Means Select Image and then delete using delete button)

Prakk said...

Thanks! I had one minor issue with my code, your logic helped me achieve my goal! Keep up the good work :)

mukesh kumar said...

Hi,

Your article is very helpful :) for us
how can download images folder form server.mappath on my local disk drive

help will be appreciated
mukesh

Suresh Dasari said...

@mukesh kumar,
check below post
http://www.aspdotnet-suresh.com/2012/02/saveupload-files-in-folder-and-download.html

Anonymous said...

Hi .When i am clicking on upload button I am getting an error
Server Error in '/WebSite36' Application.HTTP Error 400 - Bad Request. Can you suggest me how to remove this error?

miTun said...

tankx suresh

yogesh mangal said...

thank you so much suresh sir ji

Anonymous said...
This comment has been removed by the author.
Monika said...

Thanks Sir for this article but can u suggest how can we do pageing in this???
Thanks

Unknown said...
This comment has been removed by the author.
Unknown said...

how to bind or display images from folder to datalist using vb.net or how to insert images into folder and display images from folder to datalist using vb.net

Unknown said...

thank you suresh. please focus some mvc tutorials. then you site will get some more trademarks. http://murraliitechnos.in

Anonymous said...

[What's the meaning of "Name" in the
ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' ]

The "Name" is the property of the "FileInfo"
object which returns the name of the file

Anonymous said...

please write article for xml webservices. I am very poor in writing webservices. It will be very useful if you post article on xml webservices to fill grid, datalist from sql database.

Unknown said...

Great article...

ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' ]

in this line Images is a folder name right,so every time im uploading new image its showing previous images.how to stop that??

please give suggestion ???

Anonymous said...

Thanks Great site

Anonymous said...

Great article...

ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' ]

in this line Images is a folder name right,so every time im uploading new image its showing previous images.how to stop that??

please give suggestion ???

Unknown said...

i want to bind datatable to datalist help me !

Anonymous said...

tmkc tu rummy khel bkl !!

Unknown said...

Sir in my project i want show details of doctor such as their qualification name timinig no of appointment per day etc which is best control to display sir am retriving data from database

Unknown said...

i really like your website bro...

Anonymous said...

sadfsad

Anonymous said...

i have image name in table and i have image in folder and image type is varchar then how to retrieve that image based on database and folder

Amit Sharma said...

thanks sir very helpful post for me which reduce my a lot time

Anonymous said...

i want to pass parameter to Bind("Name", here i want folder name that i given in textbox how i do it

Anonymous said...

Thank's,
This article to solve my concept and saspance. so really thank's

praveen said...

hi suresh i want the detail for display single picture profile

Anonymous said...

Hey, want to show word document as image in datalist, as few content of word document shows on image dynamically, How can i do it.
Thanks in advance..

Anonymous said...

Thank you so much Suresh Dasari. I have used every code exactly and it works like charm. Except I don't know how to make images click-able. I have a list with movies playing in theaters and want to give more details when somebody clicks the movie poster. Website is www.recentmoviesintheaters.com and I haven't been able to add anything else except this list with posters with Datalist object. How to add click on poster? Thanks.

Anonymous said...

what r meaning of Name please define Name.

Anonymous said...

Superb Post. Mukesh Kumar....

Unknown said...

thanks it worked for me ... and could u please tell me how to display some title on top of each image inside datalist(like wen i upload each image in the output i get imagename.jpg or image name.jpeg at the bottom of each image) so like tat i want some title for each image ...please rply

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.