为您的照片和电影创建可浏览的动态界面

• 下载源代码 - 15.6 Kb

这张截图主要向您展示了如何仅使用代码对图片进行分组。所有分组都从文件夹名称（Friends）获取，而图片名称（Friends 004..）则直接来自实际文件，这让我只需要复制粘贴图片就行了——就是这么简单！

引言

这是我在 CodeProject 上的第一篇文章。我常常觉得需要把一些图片/文件放到一个文件夹里，然后让代码完成剩下的工作，比如——维护 UI、根据文件夹进行排列，以及限制访问（在一定程度上是这样 :-D）。

它的工作原理是这样的：您有一个文件夹，比如说 Photos。您可以在 Photos 文件夹内放置任意数量的子文件夹，比如 Family、Tour to Canada 等，而照片就放在这些子文件夹里。现在（假设 Photos 与 ASP.NET 文件在同一个文件夹中），这能让您生成设计精美的分组（文件夹）以及其中的文件。让我们来看看如何实现它……

背景

需要对 System.IO.Path 和 System.IO.Directory 的工作方式有基本了解……但不是必须的。嘿，这是我在学习 ASP.NET 的第一天就构建出来的，所以您可以算算……编写代码并理解它只需要 10-15 分钟。

使用代码

首先，我们需要构建至少一个 UI 元素来容纳可浏览的界面。它甚至可以是顶层文档，但我更喜欢使用 Panel 控件，这样我们就可以围绕它进行设计。现在，Panel 控件（比如说 Panel1）将被动态地用于添加包含实际 UI 的标签控件。（这可能看起来有点复杂——实际上，最终生成的 HTML 只有一个 <DIV> 标签和一些 <A HREF> 链接！就这些！）

好了，现在是代码部分，它相当简单。

首先，我们引入 System.IO 命名空间，这样我们就可以使用 Path 和 Directory 了。为什么？好吧……我们首先需要从文件夹中获取文件（Directory 允许这样做），然后使用 Path 对文件名/文件夹名做一些处理。

imports System.IO

您存储文件（照片、视频等）的层级结构很重要：只需将一个文件夹，比如 Photos，放在这个 ASP.NET 文件所在的位置，同样也可以放其他文件夹，比如 Videos、Songs 等。然后，您只需从任何地方复制您的 Photos 文件夹，并将其放入 Photos 文件夹的一个子文件夹中。请记住，Photos 是顶层文件夹，而比如说 Family 是子文件夹。现在，程序就是用这个子文件夹名称来对 Family 文件夹中的文件进行分组的。

说够了……让我们开始吧……

在 Page_Load 事件内部，首先将 Photos 文件夹（举个例子）中的文件夹列表放入一个新的 Array（String Array）中。Directory.GetFolders(directory) 可以让你做到这一点。

所以：

Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load 
    On Error Resume Next 
    Panel1.Controls.Clear() 
    Dim directory1$ 
    Dim i% 
    Dim s() As String 
       directory1 = Page.MapPath("photos")
    s = Directory.GetDirectories(directory1) 
    For i = 0 To s.Length - 1 
        s(i) += ".jpg" 
        createUI(Path.GetFileNameWithoutExtension(s(i)))
    Next
End Sub

现在，是一些可能看起来不太常规的东西。

directory1 = Page.MapPath("photos")
s = Directory.GetDirectories(directory1)

这段代码获取了 ASP.NET 文件运行的文件夹，因此您需要将 Photos 文件夹放置在运行此代码的 localhost 或 Web 服务器上的任何位置。现在，s 包含了“Photos”文件夹内的所有文件夹。

顺便说一句，我清除了 Panel1 的控件，以确保安全，避免我一次又一次地重复添加控件。

现在，为了给每个文件夹创建一个可浏览的界面，我们使用 createUI 例程，它的作用正是如此：给定一个文件夹，它会搜索所有文件，并编写 HTML 和 <A HREF> 代码来支持适当的交互。

那么，让我们来看看 createUI (呵呵..没有用驼峰命名法..:( ) 的代码吧。

Public Sub createUI(ByVal title$)
    On Error Resume Next
    Dim i%
    Dim d1$, apppath
    Dim s() As String
    d1 = Page.MapPath("photos\" + title)
    s = Directory.GetFiles(d1)
    Dim Label1 As New Label
    Dim Label2 As New Label

    Label1.Text += "<br><center> " & _ 
       "<big> <font style="" georgia "" size=5> <b><center>::  " _
       + title + " ::</b> </font> </big> </center> <br>"
    P1.Controls.Add(Label1)
    P1.Controls.Add(Label2) 
    Label2.Text = "<center> <big> " 
    Dim ext$
    For i = 0 To s.Length - 1 
        ext = Trim(LCase(Path.GetExtension(s(i))))
        If ext = ".jpg" OrElse ext = ".jpeg" OrElse _
                  ext = ".bmp" OrElse ext = ".gif" Then
            Label2.Text += "<a href=""photos/" & title & "/"_
               + Path.GetFileName(s(i)) + """>.::     " + _
               MakeName(s(i)) + "    </a>  "
            Label2.Text += "<small><small>(" + _
                 Str(Math.Ceiling(FileLen(s(i)) / 1024)) + _
                 " KB)</small></small> :: "
        End If
    Next 
    Label2.Text += "</big> </center>  "
    Label1.BorderStyle = BorderStyle.Solid
    Label1.BorderWidth = Unit.Pixel(1)
End Sub

一点解释

我们在这里也使用了 MapPath (Page.MapPath)，请注意 Photos 在这里是硬编码的。但您可以将其作为参数传递或设为全局变量。这是一个简单的改动。

两个控件，Label1 和 Label2，被用来呈现 HTML（以格式化的 DIV 标签形式）。

Label1 用于显示分组——比如“Family”、“Tour to Canada”等，而 Label2 用于显示文件。它是一个带有链接（A HREF）的格式化 DIV 标签。我们将 Label1 和 Label2 添加到 Panel 的 Controls 列表中。

Panel1.Add(Control)
..

我注意到的主要问题是，有时我可能只想限制对某些图片的访问（比如有一次，很多人同时访问 10MB 的文件，我甚至无法访问 CodeProject！）。您可以通过提供更多条件来做到这一点。

ext 保存了正在处理的文件的扩展名。在这里，我只检查它是否是有效的图片文件（因此有 jpg、jpeg、bmp、gif 的比较）。只有这样，我才会添加必要的 A HREF 标签来指向相应的文件。这里我使用 Path 命名空间来明确文件的确切位置。由于相对路径非常有用（例如，当您将文件从一个服务器移到另一个服务器时），我 избавился от всего имени папки (скажем, "http:\\whatever\Photos\Friends\pic.jpg") и оставил только имя файла и подпапку (в данном случае, "Photos\Friends\pic.jpg")。

...Label2.Text+="<a href=""photos/" & _
       title & "/" + Path.GetFileName(s(i))...

然后，顺便说一下，我还使用 FileLen() 函数写下了文件大小。

"<small><small>(" + Str(Math.Ceiling(FileLen(s(i)) / 1024))_
           + " KB)</small></small> :: "

这会以字节为单位返回文件大小（Long），所以我除以 1024 得到 KB（希望我没有详细到令人烦恼的程度 :-/），并将其转换为 String。剩下的 2-3 行代码是用于装饰目的的，最好不作解释，留给您自己去玩耍 :-) 。

关注点

提示：有时，图片可能只有 100 字节（GIF）左右，所以我使用 Math.Ceiling 来显示 1 KB，而不是没什么用的 0 KB :-) 此外，我觉得有必要隐藏一些文件，让代码不显示它们。

您可以尝试使用一个方法来检查该文件的文件属性，看看它是否被隐藏，如果是，就在 For 循环中直接跳到下一个。我还在研究这个问题（Files.GetAttribute 似乎不起作用）。欢迎任何想法。

还有一件事：在 Page_Load 事件中，我使用了

....
    s = Directory.GetDirectories(directory1) 
    For i = 0 To s.Length - 1 
        s(i) += ".jpg" 
        createUI(Path.GetFileNameWithoutExtension(s(i))) 
    Next 
....

我添加这个扩展名只是为了欺骗 GetFileNameWithoutExtension 方法，让它以为我只想要文件名。实际上，我需要的是最内层的文件夹，而这很难获取（需要使用 instr 和一些奇怪的函数……啊啊啊），因此用了这个小技巧。

另一个值得尝试的有趣事情是：在图片旁边放置一个缩略图，这相当直接，并且 Karthik 在这里有很好的详细解释。另一个实用工具是使用一个辅助函数（我自创的）来“美化”文件名（比如从 "music_by_artist" 变成 "Music By Artist"）。我已将此代码放在 zip 文件中的 modEssential.vb 里。

欢迎提出替代方案/反馈（关于我第一篇 CodeProject 文章！）。

历史

您可能想试试我的 homip 服务器 并查看照片/视频（请不要大量下载任何东西——我已经很难控制我的朋友们访问它了 :-D）。这是我在开始使用 IIS/ASP.NET 的第一天就搭建的（凭借我之前在 VB.NET 方面的知识和 CodeProject 上的一些示例），所以如果有任何错误/替代方案/评论，请告诉我。