RSS订阅
用户名: 密码:

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

2007-11-08 16:37:16 作者:探索者 来源: 浏览次数:0 网友评论 0

在现在的数码时代,我们会经常拍摄一些相片以供留念,而随着数码照片的增多,往往需要很好地管理这些照片,以便更好地查阅留念。现在网上有不少的电子相册,都能很好的实现这些功能,那我们能否自己动手创建自己的相册呢?当然可以,在这篇文章中,我们将利用A .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.Ma ath(" quot;))
 Dim images() as FileInfo = FilterForImages(dirInfo.GetFiles())
 ...

End Sub

其中,用Server.ma ath获得当前目录的路径,而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.GetExte ion(images(i).Name) = ".jpg" OrElse _
   Path.GetExte ion(images(i).Name) = ".jpeg" OrElse _
   Path.GetExte ion(images(i).Name) = ". g" OrElse _
   Path.GetExte ion(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(" quot;) is Nothing AndAlso _
  I umeric(Request.QueryString(" quot;)) then
   imgIndex = CInt(Request.QueryString(" quot;))
End If
 
currentImgTitle.Text = "You are Viewing: " &am  _
  Path.GetFileNameWithoutExte ion(images(imgIndex).Name) &am  _
  " (" &am  imgIndex + 1 &am  " of " &am  images.Length &am  ")"
   currentImg.ImageUrl = Path.GetFileName(images(imgIndex).Name)
    ...
End Sub

HTML部分代码

<A :Label runat=" erver" id="currentImgTitle" /><br />
<a :Image runat=" erver" id="currentImg" />

在上面的代码中,使用变量imgindex来表示当前浏览的是第几张图片,刚开始时候N=0,则获得images数组中的第一个变量,也即第一张图片,之后每次读取该变量值,则可以知道当前浏览的是第几张图片。

而为了实现“下一张,上一张”的功能,往窗体增加两个HyPerlink链接控件,并添加以下代码


Sub Page_Load(sender as Object, e as EventArgs)
...

If imgIndex > 0 then
 lnkPrev.NavigateUrl = "Default.a x?N=" &am  imgIndex - 1
End If

If imgIndex < images.Length - 1 then
 lnkNext.NavigateUrl = "Default.a x?N=" &am  imgIndex + 1
End If
...
End Sub

HTML 部分代码


<a :HyperLink runat=" erver" id="lnkPrev" Text="< Previou quot; /> |
<a :HyperLink runat=" erver" id="lnkNext" Text=" ext >" />

上面代码比较容易理解,当点下一张,上一张的链接时,参数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.GetFileNameWithoutExte ion(_
   DataBinder.Eval(e.Item.DataItem, " ame").ToString()) &am  _
   " (" &am  _
    Int(DataBinder.Eval(e.Item.DataItem, "Length") / 1000) &am  _
   " KB)"
  hl.NavigateUrl = "Default.a x?N=" &am  e.Item.ItemIndex
 End If
End Sub

HTML部分代码


<a :DataList runat=" erver" id="dlIndex" OnItemDataBound="dlIndex_ItemDataBound"
RepeatColum ="3">
<ItemTemplate>
<li><a :HyperLink runat=" erver" id="lnkPic" /></li>
</ItemTemplate>
</a :DataList>

在上面的代码中,在DATALIST的onitemdatabound事件中,首先判断当前触发的项目是否是列表项listitemtype或者是交替项AlternatingItem,如果是的话,则动态生成链接hl,设置hl的值为当前正在浏览图象的文件名,并且注明了文件的大小,设置其链接的地址为当前浏览图象的地址,这样,用户可以直接点要浏览的图片了,不一要通过上一张,下一张的链接来实现。

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


<%@ Import Name ace=" ystem.IO" %>
<script runat=" erver" language="V quot;>
Sub Page_Load(sender as Object, e as EventArgs)
 Dim dirInfo as New DirectoryInfo(Server.Ma ath(" quot;))
 Dim images() as FileInfo = FilterForImages(dirInfo.GetFiles())

 Dim imgIndex as Integer = 0

 If Not Request.QueryString(" quot;) is Nothing AndAlso I umeric(Request.QueryString(" quot;)) then
  imgIndex = CInt(Request.QueryString(" quot;))
 End If

 currentImgTitle.Text = "You are Viewing: " &am  _
  Path.GetFileNameWithoutExte ion(images(imgIndex).Name) &am  _
  " (" &am  imgIndex + 1 &am  " of " &am  images.Length &am  ")"
  currentImg.ImageUrl = Path.GetFileName(images(imgIndex).Name)

  If imgIndex > 0 then
   lnkPrev.NavigateUrl = "Default.a x?N=" &am  imgIndex - 1
  End If

  If imgIndex < images.Length - 1 then
   lnkNext.NavigateUrl = "Default.a x?N=" &am  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.GetExte ion(images(i).Name) = ".jpg" OrElse _
   Path.GetExte ion(images(i).Name) = ".jpeg" OrElse _
   Path.GetExte ion(images(i).Name) = ". g" OrElse _
   Path.GetExte ion(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.GetFileNameWithoutExte ion(DataBinder.Eval(e.Item.DataItem, " ame").ToString()) &am  _
  " (" &am  Int(DataBinder.Eval(e.Item.DataItem, "Length") / 1000) &am  " KB)"
  hl.NavigateUrl = "Default.a x?N=" &am  e.Item.ItemIndex
 End If
End Sub
</script>

<HTML>
<HEAD>
 <STYLE TYPE="text/c quot;>
  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>
<a :Label runat=" erver" id="currentImgTitle" C Cla ="ImageTitle" /><br />
<a :Image runat=" erver" id="currentImg" />
<a :HyperLink runat=" erver" C Cla =" avLink" id="lnkPrev" Text="< Previou quot; /> |
<a :HyperLink runat=" erver" C Cla =" avLink" id="lnkNext" Text=" ext >" />
<a :DataList runat=" erver" id="dlIndex" OnItemDataBound="dlIndex_ItemDataBound"
RepeatColum ="3" C Cla ="index">
<ItemTemplate>
<li><a :HyperLink runat=" erver" id="lnkPic" /></li>
</ItemTemplate>
</a :DataList>
</center>
</BODY>
</HTML>

相关文章

[错误报告] [推荐] [收藏] [打印] [关闭] [返回顶部]

最新图片文章

最新文章


关于本站帮助(?)┊广告服务版权声明业务合作加盟我们网站地图联系我们
Copyright © 2005-2008 www.phpip.com online services. All rights reserved. 陕ICP备05002402号
在线管理员 QQ:271162318 17864997