Extract Image from Server Folder and display images in DIV using Asp.Net C# and VB

I have previously shared an article on how to extract files from folders and bind the files to a GridView control in Asp.Net. A few days back I was working on a project that included showing images on a webpage and this time I was required to display the images inside a DIV element. Here in this article, I’ll show you how to extract image files from a remote server folder and display the images inside a DIV element using Asp.Net C# and Vb.

Extract Image Files from Server Folder using Asp.Net

The Markup

In the markup section, I have included a DIV element that will have no other elements. I’ll create all other elements dynamically (using code behind procedures) after extracting the images.

<body>
    <div style="float:left;" id="imageList" runat="server"></div>
</body>

Code Behind (C#)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

using System.IO;

public partial class SiteMaster : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        LoadFiles("images/products/");
    }

    private void LoadFiles(string sFolder)
    {
        try
        {
            DirectoryInfo objDir = new DirectoryInfo(Server.MapPath(sFolder));

            FileInfo[] listfiles = objDir.GetFiles("*.*");
            if (listfiles.Length > 0)
            {
                for (int i = 0; i <= listfiles.Length - 1; i++)
                {
                    // CHECK FILE TYPES.
                    if (listfiles[i].Extension == ".jpg" | listfiles[i].Extension == ".png")
                    {
                        // CREATE A DIV ELEMENT (AS CONTAINTER FOR EACH IMAGE).
                        HtmlGenericControl divImage = new HtmlGenericControl("div");
                        divImage.Attributes.Add("style", "border:solid 1px #DDD;margin:2px;padding:1px;width:50px;cursor:pointer;");

                        // CREATE AN IMAGE CONTROL FOR EVERY EXTRACTED IMAGE.
                        HtmlGenericControl img = new HtmlGenericControl("img");
                        img.Attributes.Add("src", sFolder + listfiles[i].Name);
                        img.Attributes.Add("alt", sFolder + listfiles[i].Name);
                        img.Attributes.Add("class", "tp");
                        img.Attributes.Add("style", "width:50px;");

                        // ADD THE IMAGE TO THE DYNAMICALLY CREATED DIV ELEMENT.
                        divImage.Controls.Add(img);

                        // FINALLY, ADD THE CONTAINER (WITH THE IMAGE) TO THE PARENT DIV.
                        imageList.Controls.Add(divImage);
                    }
                }
            }
        }
        catch (Exception ex)
        {
        }
        finally
        {
        }
    }
}

I am using the DirectoryInfo class to browse the folder and get all files from it. This class provides the necessary methods and properties that will help extract information about folders and subfolders.

Once I have extracted all the files, I’ll filter the files by checking the extensions of each file. Since, I am looking for image files in particular. To get the file types, I am using the FileInfo

This class provides methods and properties that will help get information such as, file length, file type, name etc.

Code Behind (Vb)

Option Explicit On
Imports System.IO

Partial Class Site
    Inherits System.Web.UI.MasterPage

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        LoadFiles("images/products/")
    End Sub

    Private Sub LoadFiles(ByVal sFolder As String)
        Try
            Dim objDir As New DirectoryInfo(Server.MapPath(sFolder))

            Dim listfiles As FileInfo() = objDir.GetFiles("*.*")

            If listfiles.Length > 0 Then
                For i = 0 To listfiles.Length - 1

                    ' CHECK FILE TYPES.
                    If listfiles(i).Extension = ".jpg" Or listfiles(i).Extension = ".png" Then

                        ' CREATE A DIV ELEMENT (AS CONTAINTER FOR EACH IMAGE).
                        Dim divImage As New HtmlGenericControl("div")
                        divImage.Attributes.Add("style", "border:solid 1px #DDD;margin:2px;padding:1px;width:50px;cursor:pointer;")

                        ' CREATE AN IMAGE CONTROL FOR EVERY EXTRACTED IMAGE.
                        Dim img As New HtmlGenericControl("img")
                        img.Attributes.Add("src", sFolder & Trim(listfiles(i).Name))
                        img.Attributes.Add("alt", sFolder & Trim(listfiles(i).Name))
                        img.Attributes.Add("class", "tp")
                        img.Attributes.Add("style", "width:50px;")

                        ' ADD THE IMAGE TO THE DYNAMICALLY CREATED DIV ELEMENT.
                        divImage.Controls.Add(img)

                        ' FINALLY, ADD THE CONTAINER (WITH THE IMAGE) TO THE PARENT DIV.
                        imageList.Controls.Add(divImage)
                    End If
                Next
            End If
        Catch ex As Exception
        Finally
        End Try
    End Sub
End Class

← PreviousNext →