用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>

本类下载排行

用ASP.NET创建网络相册