分享
 
 
 

用ASP.NET创建网络相册

王朝asp·作者佚名  2008-05-21
窄屏简体版  字體: |||超大  

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

lnkNext.NavigateUrl = "Default.aspx?N=" & imgIndex + 1End 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 SubSub 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 IfEnd 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 SubFunction 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 FunctionSub 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 IfEnd 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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有