用ASP.NET創建網絡相冊

2024-07-10 13:01:52

字體：大中小

來源：轉載

供稿：網友

在現在的數碼時代，我們會經常拍攝一些相片以供留念，而隨著數碼照片的增多，往往需要很好地管理這些照片，以便更好地查閱留念。現在網上有不少的電子相冊，都能很好的實現這些功能，那我們能否自己動手創建自己的相冊呢？當然可以，在這篇文章中，我們將利用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)

　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>