In this article I will explain with an example, how to display images from Folder (Directory) in ASP.Net using GridView control.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net FileUpload control, a Button and an ASP.Net GridView control.
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false">
    <Columns>
        <asp:BoundField DataField="Text" />
        <asp:ImageField DataImageUrlField="Value" ControlStyle-Height="100" ControlStyle-Width="100" />
    </Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Collections.Generic;
 
VB.Net
Imports System.IO
Imports System.Collections.Generic
 
 
Uploading Images using ASP.Net FileUpload Control
When the Upload Button is clicked, the uploaded Image file is saved in the Folder (Directory) on Disk.
Note: If you need to learn about validation of files so that user can upload only Image files then please refer my article, ASP.Net FileUpload: File Extension Validation.
 
Finally, the Page is redirected to itself which will load the Image inside the GridView control.
C#
protected void Upload(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
        FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);
        Response.Redirect(Request.Url.AbsoluteUri);
    }
}
 
VB.Net
Protected Sub Upload(sender As Object, e As EventArgs)
    If FileUpload1.HasFile Then
        Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
        FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName)
        Response.Redirect(Request.Url.AbsoluteUri)
    End If
End Sub
 
 
Displaying images from Folder (Directory) in ASP.Net GridView
In the Page Load event, the Image files are fetched from the Images folder and using a For Loop, the URL of the Image files are added to the List Collection which is later used to populate (bind) the GridView.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));
        List<ListItem> files = new List<ListItem>();
        foreach (string filePath in filePaths)
        {
            string fileName = Path.GetFileName(filePath);
            files.Add(new ListItem(fileName, "~/Images/" + fileName));
        }
        GridView1.DataSource = files;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Images/"))
        Dim files As New List(Of ListItem)()
        For Each filePath As String In filePaths
            Dim fileName As String = Path.GetFileName(filePath)
            files.Add(New ListItem(fileName, "~/Images/" + fileName))
        Next
        GridView1.DataSource = files
        GridView1.DataBind()
    End If
End Sub
 
 
Screenshot
Display Images from Folder in ASP.Net
 
 
Downloads
Download Code