How do you display a list of images, from a folder on hard drive, on ASP.NET website?
First you need to place the images you want to display under the web tree. Let's assume you have done that and they are in folder called Images. You can then use a Repeater control to display them by data-binding it like so:
Something like this...
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
</ItemTemplate>
</asp:Repeater>
And then in your code behind:
protected void Page_Load(object sender, EventArgs e)
{
string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images"));
List<String> images = new List<string>(filesindirectory.Count());
foreach (string item in filesindirectory)
{
images.Add(String.Format("~/Images/{0}", System.IO.Path.GetFileName(item)));
}
RepeaterImages.DataSource = images;
RepeaterImages.DataBind();
}
This basically creates an array of images with their full path from the directory. It then creates a List of strings that contain the virtual path to the image. It then binds that List to the repeater, which displays each item in it's template, which is an Image control which uses the path as the ImageUrl. It's quick'n'dirty, but works and should be a good starting point.
You're creating an <img> element with a URL of C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. Obviously, that won't work in a web browser.
You should copy the images to a subfolder of your project, and set the URL to a relative URL, like this:
img.ImageUrl = "~/Web Images/" + Path.GetFileName(s);
(Assuming that the Web Images folder is a subfolder of the application root)
For instance
You need to have a way to specify where your images will be stored in your app. Therefore you need a web config file with the path in it. Or if you want to be really creative, you can store it in a database....
In your Web Page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Images.aspx.cs" Inherits="ImageViewer" %>
<!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>Viewer Demo</title>
<link href='styles.css' rel='stylesheet' type='text/css' />
</head>
<body>
<form id="form1" runat="server">
<div id="outer">
<h2>Viewer Demo</h2>
<br />
<div style="clear:both;">
<h4>Using Viewer with the Repeater Control</h4>
<p>Repeater control to display a collection of images.</p>
</div>
<div style="clear:both;">
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
</ItemTemplate>
</asp:Repeater>
</div>
<br />
</div>
</form>
</body>
</html>
In your web.config
<appSettings>
<add key="FilePath" value="~/images"/>
</appSettings>
and In your code behind .cs file You really need to filter files, that way if someone( maybe you ;) ) puts erroneous files in it, you won't inadvertently include them...
string filters = "*.jpg;*.png;*.gif";
string Path = ConfigurationManager.AppSettings["FilePath"].ToString();
List<String> images = new List<string>();
foreach (string filter in filters.Split(';'))
{
FileInfo[] fit = new DirectoryInfo(this.Server.MapPath(Path)).GetFiles(filter);
foreach (FileInfo fi in fit)
{
images.Add(String.Format(Path + "/{0}", fi));
}
}
RepeaterImages.DataSource = images;
RepeaterImages.DataBind();