儲存美麗記憶 用ASP.NET建立網路相簿

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>