用ASP.NET建立網路相簿

來源:互聯網
上載者:User
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>




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。