保存美丽记忆 用ASP.NET创建网络相册

   在现在的数码时代，我们会经常拍摄一些相片以供留念，而随着数码照片的增多，往往需要很好地管理这些照片，以便更好地查阅留念。现在网上有不少的电子相册，都能很好的实现这些功能，那我们能否自己动手创建自己的相册呢？当然可以，在这篇文章中，我们将利用asp.net，来创建一个简单的在线相册，以收藏我们的照片。

    首先来看下，这个相册有哪些功能。在这个相册中，我们必须先把预先摄影好的照片放到一个目录下去，之后，可以供在网上使用“上一张，下一张”的链接一张张地查看。

    下面先介绍如何获得文件夹中的图片。我们可以使用System.IO命名空间中的DirectoryInfo类来实现。将文件夹所在的路径做为参数传递到该类的构造函数中，并声明一个DirectoryInfo类的实例。DirectoryInfo类中有一个GetFiles（）的方法，会返回FileInfo的对象数组，而每一个FileInfo的实例将包含指定路径下文件的具体信息。下面的代码片段说明了该过程：

    Sub Page_Load（sender as Object， e as EventArgs）

    'Get list of images Dim dirInfo as New DirectoryInfo（Server.MapPath（""））

    Dim images（） as FileInfo = FilterForImages（dirInfo.GetFiles（））

    ……

    End Sub

    其中，用Server.mappath获得当前目录的路径，而dirinfo.getfiles（）将会返回该目录下的所有文件。而由于我们的是相册，只需要看到比如JPG，BMP，GIF等图象文件，所以我们可以通过程序实现，只装载这些类型的文件，这通过一个自定义的过程FilterForImages来实现，该过程将只返回指定文件夹中图象类型的文件。代码如下：

    Function FilterForImages（images（） as FileInfo） as FileInfo（）

    Dim newImages as New ArrayList（images.Length）

    Dim i as Integer For i = 0 to images.Length - 1 If Path.GetExtension（images（i）。Name） = ".jpg" OrElse _ Path.GetExtension（images（i）。Name） = ".jpeg" OrElse _ Path.GetExtension（images（i）。Name） = ".png" OrElse _ Path.GetExtension（images（i）。Name） = ".gif" then newImages.Add（images（i））

    End If Next

    Return CType（newImages.ToArray（GetType（FileInfo））， FileInfo（））

    End Function

    该过程对于传递进来的FileInfo参数数组进行遍历，对文件夹中的文件的后缀名进行叛断，如果属于图象文件，则添加到newimages数组中去，并以arraylist形式返回。

    接下来，我们看下如何显示每一张图片，并以“上一张，下一张”来显示。为了知道当前浏览的是第几张图片，可以通过使用传递参数的方法来实现。先往窗体中添加一个image控件和文本框，程序代码如下：

    Sub Page_Load（sender as Object， e as EventArgs）

    ……

    ' Dim imgIndex as Integer = 0 If Not Request.QueryString（"N"） is Nothing AndAlso _ IsNumeric（Request.QueryString（"N"）） then imgIndex = CInt（Request.QueryString（"N"））

    End If

    currentImgTitle.Text = "You are Viewing： " & _ Path.GetFileNameWithoutExtension（images（imgIndex）。Name） & _ " （" & imgIndex + 1 & " of " & images.Length & "）" currentImg.ImageUrl = Path.GetFileName（images（imgIndex）。Name）

    ……

    End Sub

    HTML部分代码

    <asp：Label runat="server" id="currentImgTitle" /><br /> <asp：Image runat="server" id="currentImg" />

    在上面的代码中，使用变量imgindex来表示当前浏览的是第几张图片，刚开始时候N=0，则获得images数组中的第一个变量，也即第一张图片，之后每次读取该变量值，则可以知道当前浏览的是第几张图片。

    而为了实现“下一张，上一张”的功能，往窗体增加两个Hyperlink链接控件，并添加以下代码

    Sub Page_Load（sender as Object， e as EventArgs）

    ……

    If imgIndex > 0 then lnkPrev.NavigateUrl = "Default.aspx？N=" & imgIndex - 1 End If

    If imgIndex < images.Length - 1 then lnkNext.NavigateUrl = "Default.aspx？N=" & imgIndex + 1 End If……

    End Sub

    HTML 部分代码

    <asp：HyperLink runat="server" id="lnkPrev" Text="< Previous" /> | <asp：HyperLink runat="server" id="lnkNext" Text="Next >" />

    上面代码比较容易理解，当点下一张，上一张的链接时，参数N的值加1，或者减1.

    最后，为了实现比较直观的效果，我们放置一个datalist控件，其中显示图象文件夹下的所有文件，每当浏览一张新的图片时，则将当前正在浏览的图片的名称以链接的形式加亮显示，代码如下：

    Sub Page_Load（sender as Object， e as EventArgs）

    ……

    dlIndex.DataSource = images dlIndex.DataBind（）

    End Sub

    Sub dlIndex_ItemDataBound（sender as Object， e as DataListItemEventArgs）

    If e.Item.ItemType = ListItemType.Item OrElse _ e.Item.ItemType = ListItemType.AlternatingItem then 'Get the Hyperlink Dim hl as HyperLink = CType（e.Item.FindControl（"lnkPic"）， HyperLink）

    'Set the Text and Navigation properties hl.Text = Path.GetFileNameWithoutExtension（_ DataBinder.Eval（e.Item.DataItem， "Name"）。ToString（）） & _ " （" & _ Int（DataBinder.Eval（e.Item.DataItem， "Length"） / 1000） & _ " KB）" hl.NavigateUrl = "Default.aspx？N=" & e.Item.ItemIndex End If End Sub

    HTML部分代码

    <asp：DataList runat="server" id="dlIndex" OnItemDataBound="dlIndex_ItemDataBound" RepeatColumns="3"> <ItemTemplate> <li><asp：HyperLink runat="server" id="lnkPic" /></li> </ItemTemplate> </asp：DataList>

    在上面的代码中，在DATALIST的onitemdatabound事件中，首先判断当前触发的项目是否是列表项listitemtype或者是交替项AlternatingItem，如果是的话，则动态生成链接hl，设置hl的值为当前正在浏览图象的文件名，并且注明了文件的大小，设置其链接的地址为当前浏览图象的地址，这样，用户可以直接点要浏览的图片了，不一要通过上一张，下一张的链接来实现。

    最后给出运行的一个例子（http://aspnet.4guysfromrolla.com/London/）和全部代码：

    <%@ Import Namespace="System.IO" %> <script runat="server" language="VB"> Sub Page_Load（sender as Object， e as EventArgs）

    Dim dirInfo as New DirectoryInfo（Server.MapPath（""））

    Dim images（） as FileInfo = FilterForImages（dirInfo.GetFiles（））

    Dim imgIndex as Integer = 0

    If Not Request.QueryString（"N"） is Nothing AndAlso IsNumeric（Request.QueryString（"N"）） then imgIndex = CInt（Request.QueryString（"N"））

    End If

    currentImgTitle.Text = "You are Viewing： " & _ Path.GetFileNameWithoutExtension（images（imgIndex）。Name） & _ " （" & imgIndex + 1 & " of " & images.Length & "）" currentImg.ImageUrl = Path.GetFileName（images（imgIndex）。Name）

    If imgIndex > 0 then lnkPrev.NavigateUrl = "Default.aspx？N=" & imgIndex - 1 End If

    If imgIndex < images.Length - 1 then lnkNext.NavigateUrl = "Default.aspx？N=" & imgIndex + 1 End If

    dlIndex.DataSource = images dlIndex.DataBind（）

    End Sub

    Function FilterForImages（images（） as FileInfo） as FileInfo（）

    Dim newImages as New ArrayList（images.Length）

    Dim i as Integer For i = 0 to images.Length - 1 If Path.GetExtension（images（i）。Name） = ".jpg" OrElse _ Path.GetExtension（images（i）。Name） = ".jpeg" OrElse _ Path.GetExtension（images（i）。Name） = ".png" OrElse _ Path.GetExtension（images（i）。Name） = ".gif" then newImages.Add（images（i））

    End If Next

    Return CType（newImages.ToArray（GetType（FileInfo））， FileInfo（））

    End Function

    Sub dlIndex_ItemDataBound（sender as Object， e as DataListItemEventArgs）

    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = 　　ListItemType.AlternatingItem then Dim hl as HyperLink = CType（e.Item.FindControl（"lnkPic"）， HyperLink）

    hl.Text = Path.GetFileNameWithoutExtension（DataBinder.Eval（e.Item.DataItem， "Name"）。ToString（）） & _ " （" & Int（DataBinder.Eval（e.Item.DataItem， "Length"） / 1000） & " KB）" hl.NavigateUrl = "Default.aspx？N=" & e.Item.ItemIndex End If End Sub </script>

    <HTML> <HEAD> <STYLE TYPE="text/css"> body { font-family：Verdana；font-size： medium；}。ImageTitle { font-weight：bold； font-size：large；}。index {font-size： small；}。NavLink { background-color： yellow； font-weight： bold； } </STYLE> </HEAD> <BODY>

    <center> <asp：Label runat="server" id="currentImgTitle" CssClass="ImageTitle" /><br /> <asp：Image runat="server" id="currentImg" /> <asp：HyperLink runat="server" CssClass="NavLink" id="lnkPrev" Text="< Previous" /> | <asp：HyperLink runat="server" CssClass="NavLink" id="lnkNext" Text="Next >" /> <asp：DataList runat="server" id="dlIndex" OnItemDataBound="dlIndex_ItemDataBound" RepeatColumns="3" CssClass="index"> <ItemTemplate> <li><asp：HyperLink runat="server" id="lnkPic" /></li> </ItemTemplate> </asp：DataList> </center> </BODY> </HTML>

查看本文来源