保存美丽记忆用ASP.NET创建网络相册-.NET教程,.NET Framework-IDC资讯中心

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

保存美丽记忆用ASP.NET创建网络相册-.NET教程,.NET Framework

相关推荐

热门标签

热门文章

分类目录