在现在的数码时代我们会经常拍摄一些相片以供留念而随着数码照片的增多往往需要很好地管理这些照片以便更好地查阅留念现在网上有不少的电子相册都能很好的实现这些功能那我们能否自己动手创建自己的相册呢?当然可以在这篇文章中我们将利用来创建一个简单的在线相册以收藏我们的照片
首先来看下这个相册有哪些功能在这个相册中我们必须先把预先摄影好的照片放到一个目录下去之后可以供在网上使用上一张下一张的链接一张张地查看
下面先介绍如何获得文件夹中的图片我们可以使用SystemIO命名空间中的DirectoryInfo类来实现将文件夹所在的路径做为参数传递到该类的构造函数中并声明一个DirectoryInfo类的实例DirectoryInfo类中有一个GetFiles()的方法会返回FileInfo的对象数组而每一个FileInfo的实例将包含指定路径下文件的具体信息下面的代码片段说明了该过程
Sub Page_Load(sender as Object e as EventArgs)
Get list of images Dim dirInfo as New DirectoryInfo(ServerMapPath())
Dim images() as FileInfo = FilterForImages(dirInfoGetFiles())
……
End Sub
其中用Servermappath获得当前目录的路径而dirinfogetfiles()将会返回该目录下的所有文件而由于我们的是相册只需要看到比如JPGBMPGIF等图象文件所以我们可以通过程序实现只装载这些类型的文件这通过一个自定义的过程FilterForImages来实现该过程将只返回指定文件夹中图象类型的文件代码如下
Function FilterForImages(images() as FileInfo) as FileInfo()
Dim newImages as New ArrayList(imagesLength)
Dim i as Integer For i = to imagesLength If PathGetExtension(images(i)Name) = jpg OrElse _ PathGetExtension(images(i)Name) = jpeg OrElse _ PathGetExtension(images(i)Name) = png OrElse _ PathGetExtension(images(i)Name) = gif then newImagesAdd(images(i))
End If Next
Return CType(newImagesToArray(GetType(FileInfo)) FileInfo())
End Function
该过程对于传递进来的FileInfo参数数组进行遍历对文件夹中的文件的后缀名进行叛断如果属于图象文件则添加到newimages数组中去并以arraylist形式返回
接下来我们看下如何显示每一张图片并以上一张下一张来显示为了知道当前浏览的是第几张图片可以通过使用传递参数的方法来实现先往窗体中添加一个image控件和文本框程序代码如下
Sub Page_Load(sender as Object e as EventArgs)
……
Dim imgIndex as Integer = If Not RequestQueryString(N) is Nothing AndAlso _ IsNumeric(RequestQueryString(N)) then imgIndex = CInt(RequestQueryString(N))
End If
currentImgTitleText = You are Viewing & _ PathGetFileNameWithoutExtension(images(imgIndex)Name) & _ ( & imgIndex + & of & imagesLength & ) currentImgImageUrl = PathGetFileName(images(imgIndex)Name)
……
End Sub
HTML部分代码
<aspLabel runat=server id=currentImgTitle /><br /> <aspImage runat=server id=currentImg />
在上面的代码中使用变量imgindex来表示当前浏览的是第几张图片刚开始时候N=则获得images数组中的第一个变量也即第一张图片之后每次读取该变量值则可以知道当前浏览的是第几张图片
而为了实现下一张上一张的功能往窗体增加两个Hyperlink链接控件并添加以下代码
Sub Page_Load(sender as Object e as EventArgs)
……
If imgIndex > then lnkPrevNavigateUrl = Defaultaspx?N= & imgIndex End If
If imgIndex < imagesLength then lnkNextNavigateUrl = Defaultaspx?N= & imgIndex + End If……
End Sub
HTML 部分代码
<aspHyperLink runat=server id=lnkPrev Text=< Previous /> | <aspHyperLink runat=server id=lnkNext Text=Next > />
上面代码比较容易理解当点下一张上一张的链接时参数N的值加或者减
最后为了实现比较直观的效果我们放置一个datalist控件其中显示图象文件夹下的所有文件每当浏览一张新的图片时则将当前正在浏览的图片的名称以链接的形式加亮显示代码如下
Sub Page_Load(sender as Object e as EventArgs)
……
dlIndexDataSource = images dlIndexDataBind()
End Sub
Sub dlIndex_ItemDataBound(sender as Object e as DataListItemEventArgs)
If eItemItemType = ListItemTypeItem OrElse _ eItemItemType = ListItemTypeAlternatingItem then Get the Hyperlink Dim hl as HyperLink = CType(eItemFindControl(lnkPic) HyperLink)
Set the Text and Navigation properties hlText = PathGetFileNameWithoutExtension(_ DataBinderEval(eItemDataItem Name)ToString()) & _ ( & _ Int(DataBinderEval(eItemDataItem Length) / ) & _ KB) hlNavigateUrl = Defaultaspx?N= & eItemItemIndex End If End Sub
HTML部分代码
<aspDataList runat=server id=dlIndex OnItemDataBound=dlIndex_ItemDataBound RepeatColumns=> <ItemTemplate> <li><aspHyperLink runat=server id=lnkPic /></li> </ItemTemplate> </aspDataList>
在上面的代码中在DATALIST的onitemdatabound事件中首先判断当前触发的项目是否是列表项listitemtype或者是交替项AlternatingItem如果是的话则动态生成链接hl设置hl的值为当前正在浏览图象的文件名并且注明了文件的大小设置其链接的地址为当前浏览图象的地址这样用户可以直接点要浏览的图片了不一要通过上一张下一张的链接来实现
最后给出运行的一个例子()和全部代码
<%@ Import Namespace=SystemIO %> <script runat=server language=VB> Sub Page_Load(sender as Object e as EventArgs)
Dim dirInfo as New DirectoryInfo(ServerMapPath())
Dim images() as FileInfo = FilterForImages(dirInfoGetFiles())
Dim imgIndex as Integer =
If Not RequestQueryString(N) is Nothing AndAlso IsNumeric(RequestQueryString(N)) then imgIndex = CInt(RequestQueryString(N))
End If
currentImgTitleText = You are Viewing & _ PathGetFileNameWithoutExtension(images(imgIndex)Name) & _ ( & imgIndex + & of & imagesLength & ) currentImgImageUrl = PathGetFileName(images(imgIndex)Name)
If imgIndex > then lnkPrevNavigateUrl = Defaultaspx?N= & imgIndex End If
If imgIndex < imagesLength then lnkNextNavigateUrl = Defaultaspx?N= & imgIndex + End If
dlIndexDataSource = images dlIndexDataBind()
End Sub
Function FilterForImages(images() as FileInfo) as FileInfo()
Dim newImages as New ArrayList(imagesLength)
Dim i as Integer For i = to imagesLength If PathGetExtension(images(i)Name) = jpg OrElse _ PathGetExtension(images(i)Name) = jpeg OrElse _ PathGetExtension(images(i)Name) = png OrElse _ PathGetExtension(images(i)Name) = gif then newImagesAdd(images(i))
End If Next
Return CType(newImagesToArray(GetType(FileInfo)) FileInfo())
End Function
Sub dlIndex_ItemDataBound(sender as Object e as DataListItemEventArgs)
If eItemItemType = ListItemTypeItem OrElse eItemItemType = ListItemTypeAlternatingItem then Dim hl as HyperLink = CType(eItemFindControl(lnkPic) HyperLink)
hlText = PathGetFileNameWithoutExtension(DataBinderEval(eItemDataItem Name)ToString()) & _ ( & Int(DataBinderEval(eItemDataItem Length) / ) & KB) hlNavigateUrl = Defaultaspx?N= & eItemItemIndex End If End Sub </script>
<HTML> <HEAD> <STYLE TYPE=text/css> body { fontfamilyVerdanafontsize medium}ImageTitle { fontweightbold fontsizelarge}index {fontsize small}NavLink { backgroundcolor yellow fontweight bold } </STYLE> </HEAD> <BODY>
<center> <aspLabel runat=server id=currentImgTitle CssClass=ImageTitle /><br /> <aspImage runat=server id=currentImg /> <aspHyperLink runat=server CssClass=NavLink id=lnkPrev Text=< Previous /> | <aspHyperLink runat=server CssClass=NavLink id=lnkNext Text=Next > /> <aspDataList runat=server id=dlIndex OnItemDataBound=dlIndex_ItemDataBound RepeatColumns= CssClass=index> <ItemTemplate> <li><aspHyperLink runat=server id=lnkPic /></li> </ItemTemplate> </aspDataList> </center> </BODY> </HTML>