首先來看下,這個相冊有哪些功能。在這個相冊中,我們必須先把預先攝影好的照片放到一個目錄下去,之後,可以供在網上使用“上一張,下一張”的鏈接一張張地查看。
下面先介紹如何獲得文件夾中的圖片。我們可以使用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> |