实例开发:ASP.NET创建网络相册

80酷酷网    80kuku.com

  

在现在的数码时代,我们会经常拍摄一些相片以供留念,而随着数码照片的增多,往往需要很好地管理这些照片,以便更好地查阅留念。现在网上有不少的电子相册,都能很好的实现这些功能,那我们能否自己动手创建自己的相册呢?当然可以,在这篇文章中,我们将利用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的值为当前正在浏览图象的文件名,并且注明了文件的大小,设置其链接的地址为当前浏览图象的地址,这样,用户可以直接点要浏览的图片了,不一要通过上一张,下一张的链接来实现。

最后给出运行的一个例子和全部代码:

以下为引用的内容:

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

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: