計(jì)算機(jī)畢業(yè)論文----基于bs模式的智能數(shù)字相冊(cè)的實(shí)現(xiàn)

1、<p><b>　　摘 要</b></p><p>　　隨著計(jì)算機(jī)和數(shù)碼設(shè)備的普及，數(shù)字圖片資源已成為我們?nèi)粘Ｉ钪械囊粋€(gè)重要部分，對(duì)于日益增多的圖片資源，如何更好的存儲(chǔ)和有效檢索已成為人們面臨的一個(gè)新的課題，于是電子相冊(cè)應(yīng)運(yùn)而生。該系統(tǒng)和一般的數(shù)字相冊(cè)系統(tǒng)相比，更具有一定的智能性。例如：當(dāng)用戶需要某幅相片時(shí)，可以通過(guò)簡(jiǎn)單的人機(jī)交互，或者根據(jù)用戶的使用記錄，自動(dòng)推薦出用戶可能需要

2、的圖像。</p><p>　　本文介紹基于.NET平臺(tái)開發(fā)的基于B/S模式的智能數(shù)字相冊(cè)的具體實(shí)現(xiàn)。系統(tǒng)的主要開發(fā)語(yǔ)言為C#，應(yīng)用了XML、Ajax等技術(shù)，結(jié)合了目錄管理與SQL Server數(shù)據(jù)庫(kù)管理。同時(shí)采用基于文件方式的圖像存儲(chǔ)，即圖像文件以文件形式存放于指定的計(jì)算機(jī)目錄下，在數(shù)據(jù)庫(kù)表中只反映圖像數(shù)據(jù)文件的存儲(chǔ)路徑及各種屬性，這種存儲(chǔ)方式縮小了數(shù)據(jù)庫(kù)的容量，對(duì)圖像的操作和使用都十分方便。對(duì)于數(shù)字相片的錄入，

3、檢索等功能的實(shí)現(xiàn)，系統(tǒng)采用了當(dāng)今流行的Ajax技術(shù)，其改變了傳統(tǒng)的客戶端與服務(wù)器端交互的方式，使得用戶無(wú)需等待數(shù)據(jù)刷新，即可執(zhí)行其他的操作，所有的數(shù)據(jù)處理都在后臺(tái)進(jìn)行，提高了用戶體驗(yàn)。</p><p>　　系統(tǒng)的主要功能包括：用戶登錄與用戶管理、圖像的導(dǎo)入和顯示，根據(jù)關(guān)鍵字檢索圖像，根據(jù)圖像的分類瀏覽相冊(cè)及改變相冊(cè)的風(fēng)格。</p><p>　　關(guān)鍵詞： Ajax； .NET； 電子相冊(cè)&l

4、t;/p><p><b>　　Abstract</b></p><p>　　With the popularity of computers and numeral devices, the resources of digital photos have become important parts of our daily life. As for the growi

5、ng number of images, how to keep and retrieval them effectively is the facing problem. As a result, e-album came into being. Compared with other e-albums, this new system attend to be more intellect. For example, if you

6、 want to find out one picture from the album, you could choose to contact with your computer. Also, you could wait the system to re</p><p>　　This paper will introduce you the intelligent e-album, which is de

7、veloped with B/S model and is based on .NET platform .The e-album is developed in C# language, applied with XML and Ajax technology, combined with the management of catalogue and SQL Server. Pictures in the e-album are s

8、toraged based on files, that is pictures are storaged at the given catalogue as files not images. At the same time, only the storage location and attributes of pictures are written in the database, which makes the </p

9、><p>　　The e-album includes the login and management of users, the import and display of images, searching images according to some key words. Looking though pictures of diffirent catalogy is also included.<

10、/p><p>　　Key words: Ajax; .NET; E-album</p><p><b>　　目 錄</b></p><p><b>　　1 緒論1</b></p><p>　　1.1 研究的意義及目的1</p><p>　　1.2 國(guó)內(nèi)外文獻(xiàn)綜述

11、1</p><p>　　1.3 研究?jī)?nèi)容1</p><p><b>　　2 相關(guān)技術(shù)2</b></p><p>　　2.1 Ajax技術(shù)概述2</p><p>　　2.1.1 Ajax技術(shù)的含義2</p><p>　　2.1.2 Ajax技術(shù)的特點(diǎn)2</p>&l

12、t;p>　　2.1.3 Ajax開發(fā)的關(guān)鍵技術(shù)2</p><p>　　2.2 .NET Framework4</p><p>　　2.2.1 .NET框架結(jié)構(gòu)4</p><p>　　2.2.2 ASP.NET技術(shù)4</p><p>　　2.2.3 ASP.NET命名空間5</p><p>　　

13、2.2.4 ADO.NET技術(shù)6</p><p>　　2.3 本章小結(jié)8</p><p>　　3 智能數(shù)字相冊(cè)系統(tǒng)的設(shè)計(jì)9</p><p>　　3.1 總的設(shè)計(jì)目標(biāo)9</p><p>　　3.2 需要解決的重點(diǎn)問(wèn)題9</p><p>　　3.3 系統(tǒng)數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)10</p>&l

14、t;p>　　3.4 系統(tǒng)功能設(shè)計(jì)10</p><p>　　3.4.1 圖片管理11</p><p>　　3.4.2 圖片檢索12</p><p>　　3.4.3 圖片瀏覽16</p><p>　　3.5 本章小結(jié)19</p><p>　　4系統(tǒng)實(shí)現(xiàn)與測(cè)試20</p><

15、p>　　4.1 系統(tǒng)開發(fā)環(huán)境與工具20</p><p>　　4.1.1 Visual Studio 200820</p><p>　　4.1.2 SQL Server 200521</p><p>　　4.2 系統(tǒng)運(yùn)行環(huán)境21</p><p>　　4.3 實(shí)驗(yàn)結(jié)果22</p><p>　　4.

16、3.1 用戶登錄22</p><p>　　4.3.2 用戶注冊(cè)22</p><p>　　4.3.3 更改用戶信息23</p><p>　　4.3.4 瀏覽相片24</p><p>　　4.3.5檢索相片24</p><p>　　4.3.6 上傳相片26</p><p>　

17、　4.4 本章小結(jié)26</p><p><b>　　5 結(jié)論27</b></p><p>　　5.1 總結(jié)27</p><p>　　5.2 展望27</p><p><b>　　參考文獻(xiàn)28</b></p><p><b>　　致 謝29<

18、/b></p><p><b>　　1 緒論</b></p><p>　　1.1 研究的意義及目的</p><p>　　隨著人們生活水平的逐步提高，旅游成了大家必不可少的放松方式，每當(dāng)筆者走到一個(gè)美麗的景點(diǎn)，就會(huì)忍不住拿起數(shù)碼相機(jī)照上幾張留做回憶。雖然照片最后會(huì)存入到自己的電腦里，但是時(shí)間一長(zhǎng)、照片一多，這些有著勾起回憶的資料，就會(huì)顯

19、得雜亂無(wú)章，即不方便欣賞，也不方便管理。而電子相冊(cè)具有欣賞、傳播方便，界面美觀等特點(diǎn)，可以很好的管理所存入的照片，不失為欣賞、保存照片的最佳工具。</p><p>　　1.2 國(guó)內(nèi)外文獻(xiàn)綜述</p><p>　　智能數(shù)字相冊(cè)是一種應(yīng)用性較強(qiáng)的圖像管理軟件，也是時(shí)下最流行的一種網(wǎng)絡(luò)元素，它可以應(yīng)該在很多的領(lǐng)域，例如時(shí)下最流行的空間及博客就應(yīng)用到了這一技術(shù)，而且受到大多數(shù)網(wǎng)友的認(rèn)可和追捧。其

20、以靜態(tài)照片為素材(獲得源方式為掃描儀掃描、數(shù)碼相機(jī)拍攝等)，配合動(dòng)感的背景、前景和字幕等視頻處理的特殊效果，配上音樂(lè)就可制作成電子相冊(cè)。</p><p>　　制作好的電子相冊(cè)可以在電腦上，各類影碟機(jī)上，以及手機(jī)和MP4里觀看，這是數(shù)字相冊(cè)技術(shù)發(fā)展到今天的一個(gè)新的突破，即不再像傳統(tǒng)那樣，只能在電腦上或在影碟機(jī)上觀看了。并且還可以通過(guò)手機(jī)將自己的個(gè)性化MTV發(fā)送給遠(yuǎn)方的親朋好友們分享。當(dāng)然，如果考慮到長(zhǎng)期保存的話，制

21、作成電子相冊(cè)光盤那是最好的選擇，它可保存100多年之久，標(biāo)準(zhǔn)VCD、SVCD、DVD格式，兼容性好，通過(guò)影碟機(jī)即可與家人、朋友、客戶觀賞，若保存在硬盤上，也便于隨時(shí)調(diào)閱、欣賞，永久保存。</p><p><b>　　1.3 研究?jī)?nèi)容</b></p><p>　　該系統(tǒng)比一般的數(shù)字相冊(cè)系統(tǒng)而言，更具有一定的智能性，例如：當(dāng)用戶需要某幅相片時(shí)，可以通過(guò)簡(jiǎn)單的人機(jī)交互，或

22、者根據(jù)用戶使用記錄，自動(dòng)推薦出用戶可能需要的圖像。該智能數(shù)字相冊(cè)系統(tǒng)是一種基于B/S架構(gòu)的系統(tǒng)，它采用ASP.NET開發(fā)，采用Ajax技術(shù)縮短了網(wǎng)絡(luò)的延遲，節(jié)約了用戶的時(shí)間。</p><p>　　本系統(tǒng)所研究的是從數(shù)字相冊(cè)的管理到相冊(cè)的生成等一系列的問(wèn)題，大致分為：</p><p>　　圖像的導(dǎo)入和顯示、數(shù)據(jù)庫(kù)索引的建立、根據(jù)關(guān)鍵字檢索圖像、圖像的分類等。</p><p

23、><b>　　2 相關(guān)技術(shù)</b></p><p>　　2.1 Ajax技術(shù)概述</p><p>　　2.1.1 Ajax技術(shù)的含義</p><p>　　Ajax 技術(shù)是Asynchronous JavaScript And XML（異步 JavaScript和 XML）的英文縮寫，它不是一種單獨(dú)的技術(shù)，而是一種融合了多項(xiàng)現(xiàn)有的成熟

24、的技術(shù)集合。這種技術(shù)集合發(fā)揮了其中每一種技術(shù)的獨(dú)特之處，糅合起來(lái)便形成了一種功能強(qiáng)大的新技術(shù)[1]。Ajax使用通信技術(shù)發(fā)送和接收對(duì)服務(wù)器的異步請(qǐng)求/響應(yīng)，然后利用顯示技術(shù)處理響應(yīng)。Ajax技術(shù)主要是一種客戶端技術(shù)，是一種以瀏覽器為中心的開發(fā)框架，是一種新的Web體系結(jié)構(gòu)，是Web 2.0的核心技術(shù)[2]。Ajax的工作原理相當(dāng)于在客戶和服務(wù)器之間加了—個(gè)中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端

25、，利于客戶端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)。</p><p>　　2.1.2 Ajax技術(shù)的特點(diǎn)</p><p>　　Ajax技術(shù)的核心理念在于使用XMLHttpRequest對(duì)象發(fā)送異步請(qǐng)求。它使XHTML和 CSS實(shí)現(xiàn)基于各種標(biāo)準(zhǔn)的頁(yè)面呈現(xiàn)，使用文檔對(duì)象模型(Document Object Model)實(shí)現(xiàn)動(dòng)態(tài)顯示和交互，使用XML和XSLT操作數(shù)據(jù)和實(shí)現(xiàn)數(shù)據(jù)交換，使用

26、XMLHttpRequest實(shí)現(xiàn)異步數(shù)據(jù)檢索和讀取，最后使用JavaScript將所有數(shù)據(jù)進(jìn)行綁定和處理。與傳統(tǒng)Web頁(yè)面需刷新的“瘦客戶端”不同，Ajax提供的是無(wú)需完全刷新頁(yè)面、近乎桌面應(yīng)用、豐富多彩的“富客戶端”用戶體驗(yàn)。</p><p>　　2.1.3 Ajax開發(fā)的關(guān)鍵技術(shù)</p><p>　　Ajax技術(shù)實(shí)際上是由JavaScript、XHTML、CSS、DOM模型、XML、

27、XSLT和XMLHttpRequest對(duì)象等七種不同技術(shù)組成的一種技術(shù)集合和綜合應(yīng)用。Ajax技術(shù)開發(fā)者可以使用XHTML和CSS實(shí)現(xiàn)數(shù)據(jù)信息的統(tǒng)一化、標(biāo)準(zhǔn)化呈現(xiàn)，使用DOM模型實(shí)現(xiàn)瀏覽器端豐富的動(dòng)態(tài)顯示效果以及與服務(wù)器端的交互，使用XML和XSLT進(jìn)行瀏覽器端和服務(wù)器端的數(shù)據(jù)信息交換與處理[3]，使用 XMLHttpRequest對(duì)象進(jìn)行瀏覽器端和服務(wù)器端的異步數(shù)據(jù)讀取，使用JavaScript實(shí)現(xiàn)對(duì)所有數(shù)據(jù)進(jìn)行整合。XMLHttpR

28、equest對(duì)象和JavaScript是實(shí)現(xiàn)Ajax應(yīng)用必不可少的核心技術(shù)，其它五項(xiàng)技術(shù)在每一個(gè)Ajax應(yīng)用中不一定都會(huì)用到，主要依據(jù)開發(fā)的實(shí)際需要而定。</p><p>　　下面介紹本系統(tǒng)中應(yīng)用到的Ajax開發(fā)的關(guān)鍵技術(shù)：JavaScript，XMLHttpRequest對(duì)象以及CSS層疊樣式表。</p><p>　　JavaScript是一種基于對(duì)象(object)和事件驅(qū)動(dòng)(Even

29、t Driven)并具有安全性能的、可以與HTML標(biāo)記語(yǔ)言混合使用的解釋性編程語(yǔ)言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)送給客戶端，由瀏覽器解釋執(zhí)行，用它編寫的程序可以在瀏覽器的支持下實(shí)現(xiàn)跨平臺(tái)運(yùn)行[4]。</p><p>　　JavaScript在編程風(fēng)格上主要具有如下特征：</p><p>　　(1) 引入for和if等控制語(yǔ)句使程序效率化；</p

30、><p>　　(2) 目標(biāo)模塊(Document、Math、Date和文字列模塊等)的導(dǎo)入使程序模塊化；</p><p>　　(3) 網(wǎng)頁(yè)、Frame和Window的管理增強(qiáng)了網(wǎng)頁(yè)設(shè)計(jì)的技巧；</p><p>　　(4) OnClick、OnChange等事件處理的實(shí)現(xiàn)使網(wǎng)頁(yè)可以在客戶端作動(dòng)態(tài)響應(yīng)；</p><p>　　(5) Timer處理的實(shí)

31、現(xiàn)可以實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)；</p><p>　　(6) 對(duì)客戶端數(shù)據(jù)輸入輸出對(duì)話框的實(shí)現(xiàn)；</p><p>　　(7) Image目標(biāo)模塊對(duì)應(yīng)的圖像動(dòng)態(tài)操作。</p><p>　　在Ajax中，JavaScript已經(jīng)從默默無(wú)聞的后臺(tái)狀態(tài)完全轉(zhuǎn)移到了前臺(tái)，發(fā)揮著巨大的作用。JavaScript是整個(gè)Ajax的核心部分，它使開發(fā)人員能夠運(yùn)用編程語(yǔ)言來(lái)控制瀏覽器客戶端的行為。

32、事實(shí)上Ajax的其它組成部分都提供了JavaScript的編程接口，例如，DOM模型將文檔結(jié)點(diǎn)表現(xiàn)為對(duì)象，并定義了這些對(duì)象具有的方法和屬性；CSS也可以作為節(jié)點(diǎn)的一個(gè)屬性由JavaScript進(jìn)行控制。JavaScript腳本充分發(fā)揮了其腳本語(yǔ)言的特點(diǎn)，使用代碼控制著DOM模型、XML、CSS和XHTML等技術(shù)的行為，因此可以將JavaScript看作是Ajax中的黏合劑，它使Ajax的各個(gè)組成部分協(xié)同工作，一起完成需要實(shí)現(xiàn)的功能。&l

33、t;/p><p>　　XMLHttpRequest對(duì)象是瀏覽器中已定義好的對(duì)象,它是Ajax技術(shù)的核心組成部分，JavaScript通過(guò)它和服務(wù)器之間進(jìn)行異步通信，并通過(guò)它來(lái)解析從服務(wù)器返回的XML文件。</p><p>　　Ajax應(yīng)用的特點(diǎn)之一就是可以通過(guò)XMLHttpRequest對(duì)象發(fā)送請(qǐng)求向服務(wù)器傳輸或者讀寫數(shù)據(jù)，可以像桌面應(yīng)用程序一樣，只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而無(wú)需刷新頁(yè)面，

34、也不用每次都將數(shù)據(jù)處理的工作提交給服務(wù)器來(lái)做。這樣既減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等待時(shí)間。</p><p>　　需要注意的是，在定義XMLHttpRequest對(duì)象時(shí)，IE瀏覽器和其它瀏覽器的定義方式有所不同。</p><p>　　XMLHttpRequest對(duì)象是通信的基礎(chǔ)。是Ajax技術(shù)開發(fā)的關(guān)鍵，它能夠提供異步通信來(lái)完成在很多傳統(tǒng)Web開發(fā)中無(wú)法完成的工作。XMLH

35、ttpRequest對(duì)象由JavaScript創(chuàng)建并使用，客戶端可以從服務(wù)器端獲取需要的信息，通過(guò)與DOM和CSS的結(jié)合，實(shí)現(xiàn)局部刷新；同時(shí)還可以通過(guò)XMLHttpRequest對(duì)象異步提交信息，將輸入的數(shù)據(jù)在后臺(tái)提交到服務(wù)器而無(wú)需刷新。</p><p>　　CSS層疊樣式表是為了彌補(bǔ)HTML超文本標(biāo)記語(yǔ)言在格式修飾中的不足，同時(shí)也是為了能夠?qū)崿F(xiàn)頁(yè)面格式的批量動(dòng)態(tài)更新[5]。為了進(jìn)一步豐富頁(yè)面的動(dòng)態(tài)效果，通過(guò)使用

36、腳本語(yǔ)言與CSS結(jié)合，動(dòng)態(tài)控制頁(yè)面元素的位置、色彩等屬性。</p><p>　　CSS提供了獨(dú)立的手段來(lái)控制頁(yè)面的表現(xiàn)[6]，因此可以讓Ajax開發(fā)人員更專注于開發(fā)應(yīng)用邏輯的相關(guān)代碼，他們只需提供合理的文檔結(jié)構(gòu)即可，而不必關(guān)注表現(xiàn)，這在一定程度上簡(jiǎn)化了Ajax的開發(fā)。同時(shí)，CSS還有助于結(jié)合Ajax完成一些特殊的功能，例如，要實(shí)現(xiàn)樹狀菜單的折疊功能，一種方法是使用DOM模型在展開時(shí)添加所有子結(jié)點(diǎn)，折疊時(shí)移除所有子

37、結(jié)點(diǎn)。但這顯然是效率低的做法，使用CSS可以讓其變得非常簡(jiǎn)單，只要通過(guò)CSS設(shè)置子結(jié)點(diǎn)是否顯示即可。</p><p>　　2.2 .NET Framework</p><p>　　微軟公司將.NET Framework(框架)定義為：支持生成和運(yùn)行下一代應(yīng)用程序和XML Web Services的內(nèi)部Windows組件[7]。.NET框架旨在實(shí)現(xiàn)下列目標(biāo)：提供一個(gè)統(tǒng)一的面向?qū)ο蟮拈_發(fā)環(huán)境

38、。這個(gè)開發(fā)環(huán)境支持本地代碼的開發(fā)，遠(yuǎn)程對(duì)象程序的開發(fā)，或者在本地執(zhí)行但分布在Internet上的各種應(yīng)用程序的開發(fā)；更好的解決開發(fā)應(yīng)用的版本和部署版本之間的沖突；通過(guò)框架的解決方案，可以調(diào)用未知的或第三方的代碼，實(shí)現(xiàn)已有系統(tǒng)的移植以及代碼的可重復(fù)使用；使開發(fā)人員在開發(fā)各種不同類型應(yīng)用的時(shí)候，有一樣的開發(fā)體驗(yàn)，如基于Windows的應(yīng)用程序和基于Web的應(yīng)用程序；按照行業(yè)標(biāo)準(zhǔn)生成所有通信，以保證基于.NET Framework的代碼可與任

39、何其他代碼集成。</p><p>　　2.2.1 .NET框架結(jié)構(gòu)</p><p>　　.NET Framework主要由兩個(gè)重要的組件構(gòu)成：公共語(yǔ)言運(yùn)行庫(kù)CLR和.NET類庫(kù)。</p><p>　　公共語(yǔ)言運(yùn)行庫(kù)是.NET框架的基礎(chǔ)?？梢詫⑦\(yùn)行庫(kù)看做是一個(gè)在執(zhí)行時(shí)管理代碼的代理，它提供內(nèi)存管理、線程管理和遠(yuǎn)程處理等核心服務(wù)，并且強(qiáng)制實(shí)施嚴(yán)格的類型安全，可提高安全

40、性和可靠性的其他形式的代碼準(zhǔn)確性。以運(yùn)行庫(kù)為目標(biāo)的代碼稱為托管代碼，而不以運(yùn)行庫(kù)為目標(biāo)的代碼稱為非托管代碼[8]。</p><p>　　.NET框架的另一個(gè)主要組件是類庫(kù)，它是一個(gè)綜合性的面向?qū)ο蟮目芍赜妙愋图希梢允褂盟_發(fā)多種應(yīng)用程序，這些應(yīng)用程序包括傳統(tǒng)的命令行或圖形用戶界面應(yīng)用程序，也包括基于ASP.NET所提供的應(yīng)用程序，如Web窗體和XML Web Services。</p><

41、p>　　2.2.2 ASP.NET技術(shù)</p><p>　　ASP.NET 技術(shù)是.NET框架提供的一個(gè)統(tǒng)一Web開發(fā)模型，它使用盡可能少的代碼生成企業(yè)級(jí)Web應(yīng)用程序所必須的各種服務(wù)。ASP.NET是.NET框架中的一個(gè)重要組成部分。當(dāng)編寫ASP.NET應(yīng)用程序的代碼時(shí)，可以訪問(wèn).NET Framework中的類，也可以使用公共語(yǔ)言運(yùn)行庫(kù)(CLR)兼容的任何語(yǔ)言來(lái)編寫應(yīng)用程序的代碼。</p>

42、<p>　　可以使用ASP.NET網(wǎng)頁(yè)作為Web應(yīng)用程序的用戶界面及后臺(tái)邏輯部分。ASP.NET網(wǎng)頁(yè)在任何時(shí)候?yàn)g覽器或者客戶端設(shè)備中向用戶提供信息，并使用服務(wù)器端代碼來(lái)實(shí)現(xiàn)應(yīng)用程序邏輯。ASP.NET有下列特點(diǎn)[9]：</p><p>　　(1) 基于Microsoft ASP.NET技術(shù)。在該技術(shù)中，服務(wù)器上運(yùn)行的代碼動(dòng)態(tài)的生成到瀏覽器或客戶端設(shè)備的網(wǎng)頁(yè)輸出；</p><p&g

43、t;　　(2) 兼容所有瀏覽器或移動(dòng)設(shè)備。ASP.NET網(wǎng)頁(yè)自動(dòng)為樣式、布局等功能呈現(xiàn)正確的、符合瀏覽器的HTML。此外，還可以將ASP.NET網(wǎng)頁(yè)設(shè)計(jì)為在特定瀏覽器（如IE7.0）上運(yùn)行并利用瀏覽器特定的功能；</p><p>　　(3) 兼容.NET公共語(yǔ)言運(yùn)行庫(kù)所支持的任何語(yǔ)言，其中包括Microsoft Visual Basic、Microsoft Visual C#、Microsoft J#和Micro

44、soft Jscript .NET；</p><p>　　(4) 基于Microsoft .NET Framework平臺(tái)，它提供了Framework的所有優(yōu)點(diǎn)，包括托管環(huán)境、類型安全性和繼承；</p><p>　　(5) 具有靈活性，可以在開發(fā)的時(shí)候向頁(yè)面添加用戶創(chuàng)建的控件和第三方控件。</p><p>　　在ASP.NET網(wǎng)頁(yè)中，用戶界面編程分為兩個(gè)部分：可視組

45、件和邏輯?？梢暯M件由一個(gè)包含靜態(tài)標(biāo)記（如HTML或 ASP.NET服務(wù)器控件或兩者）的文件組成。ASP.NET可視組件用來(lái)顯示網(wǎng)頁(yè)中的靜態(tài)文本和控件。ASP.NET網(wǎng)頁(yè)的邏輯由代碼組成，這些代碼與頁(yè)面可視組件進(jìn)行交互。代碼可以駐留在頁(yè)的標(biāo)記腳本塊或者單獨(dú)的類中。如果代碼在單獨(dú)的類文件中，則該文件稱為“代碼隱藏”文件。代碼隱藏文件中的代碼可以使用Visual Basic、Visual C#、Visual J# 或 Jscript .NET

46、編寫。</p><p>　　在ASP.NET中，改變了ASP的腳本編程的概念，在Web 應(yīng)用的開發(fā)中引入的對(duì)象化的概念，使得WebForm的開發(fā)更接近于WinForm的開發(fā)，同時(shí)ASP.NET中還提供大量的服務(wù)端控件。各種控件的使用大大的簡(jiǎn)化及規(guī)范了各種功能的實(shí)現(xiàn)，使得開發(fā)人員得以從腳本的編寫中擺脫出來(lái)，去完善Web頁(yè)面的業(yè)務(wù)邏輯的開發(fā)。</p><p>　　2.2.3 ASP.NET命

47、名空間</p><p>　　ASP.NET命名空間全部位于System.Web下，它一共包含了七個(gè)命名空間。這些命名空間提供了頁(yè)面開發(fā)中的頁(yè)面對(duì)象、緩存、配置、安全以及Web控件等幾方面的類。 </p><p>　　(1) System.Web</p><p>　　該命名空間包含頁(yè)面基本操作的類，可以利用這些類完成瀏覽器和Web服務(wù)

48、器之間的通信。</p><p>　　(2) System.Web.UI.HtmlControls</p><p>　　該命名空間包含的類用于使用服務(wù)器代碼控制HTML元素。</p><p>　　(3) System.Web.UI.WebControls</p><p>　　該命名空間下包含的類可用于在網(wǎng)頁(yè)上常見Web 服務(wù)器控件。Web控件在

49、服務(wù)器上運(yùn)行，并包含窗體控件（如按鈕和文本框）以及特殊用途的控件（如Calendar控件）。這些類能夠以編程方式控制網(wǎng)頁(yè)上的元素。</p><p>　　(4) System.Web.Caching</p><p>　　該命名空間提供用于在服務(wù)器上緩存常用資源的類。ASP.NET緩存技術(shù)可以將頁(yè)面信息存儲(chǔ)到服務(wù)器的內(nèi)存中，無(wú)論是數(shù)據(jù)對(duì)對(duì)象還是頁(yè)面的某些部分，通過(guò)使用緩存技術(shù)，使得用戶在重新訪

50、問(wèn)頁(yè)面的時(shí)候，對(duì)這些資源進(jìn)行重復(fù)使用，從而提供了網(wǎng)站的訪問(wèn)性能。</p><p>　　(5) System.Web.Configuration</p><p>　　該命名空間包含用于配置ASP.NET的類。配置文件是程序中的一個(gè)重要組成部分，它用來(lái)描述程序中的一些特定屬性，由于這些屬性的變化性比較強(qiáng)，所以可以通過(guò)配置文件的更改來(lái)使程序的結(jié)果發(fā)生變化。在.NET框架中，配置文件就是一個(gè)XML

51、文件，開發(fā)人員可以通過(guò)配置文件接口來(lái)獲取相關(guān)的配置文件信息，系統(tǒng)管理員可以通過(guò)更改配置文件來(lái)改變應(yīng)用程序的控制策略，使用配置文件最根本的好處是它的靈活性，不會(huì)因?yàn)樾薷牧伺渲梦募枰匦戮幾g程序。</p><p>　　(6) System.Web.Security</p><p>　　該命名空間包含的類用于在Web服務(wù)器應(yīng)用程序中實(shí)現(xiàn)ASP.NET安全性。</p><p

52、>　　ASP.NET的安全是指保護(hù)網(wǎng)站的安全性，防止非法用戶進(jìn)行惡意的破壞。對(duì)于Web開發(fā)人員來(lái)說(shuō)，保護(hù)網(wǎng)站的安全是一個(gè)關(guān)鍵而又復(fù)雜的問(wèn)題。</p><p>　　(7) System.Web.Services</p><p>　　該命名空間包含可用于ASP.NET創(chuàng)建XML Web Services 的類。</p><p>　　2.2.4 ADO.NET技術(shù)

53、</p><p>　　ADO.NET是一組向 .NET程序員公開數(shù)據(jù)訪問(wèn)服務(wù)的類。ADO.NET為創(chuàng)建分布式數(shù)據(jù)共享應(yīng)用程序提供了一組豐富的組件。它提供了對(duì)關(guān)系數(shù)據(jù)、XML和應(yīng)用程序數(shù)據(jù)的訪問(wèn)，因此是 .NET Framework中不可缺少的一部分。ADO.NET支持多種開發(fā)需求，包括創(chuàng)建由應(yīng)用程序、工具、語(yǔ)言或Internet瀏覽器使用的前端數(shù)據(jù)庫(kù)客戶端和中間層業(yè)務(wù)對(duì)象。</p><p>

54、;　　ADO.NET對(duì)Microsoft SQL Server和XML等數(shù)據(jù)源以及通過(guò)OLE DB和XML公開的數(shù)據(jù)源提供一致的訪問(wèn)。數(shù)據(jù)共享使用者應(yīng)用程序可以使用ADO.NET來(lái)連接到這些數(shù)據(jù)源，并檢索、處理和更新所包含的數(shù)據(jù)。</p><p>　　ADO.NET通過(guò)數(shù)據(jù)處理將數(shù)據(jù)訪問(wèn)分解為多個(gè)可以單獨(dú)使用或一前一后使用的不連續(xù)組件。ADO.NET包含用于連接到數(shù)據(jù)庫(kù)、執(zhí)行命令和檢索結(jié)果的.NET Framew

55、ork 數(shù)據(jù)提供程序。您可以直接處理檢索到的結(jié)果，或?qū)⑵浞湃階DO.NET DataSet對(duì)象，以便與來(lái)自多個(gè)源的數(shù)據(jù)或在層之間進(jìn)行遠(yuǎn)程處理的數(shù)據(jù)組合在一起，以特殊方式向用戶公開。ADO.NET DataSet對(duì)象也可以獨(dú)立于.NET Framework數(shù)據(jù)提供程序使用，以管理應(yīng)用程序本地的數(shù)據(jù)或源自XML的數(shù)據(jù)。</p><p>　　ADO.NET類在System.Data.dll中，并且與System.Xml

56、.dll中的XML類集成。當(dāng)編譯使用System.Data命名空間的代碼時(shí)，請(qǐng)引用System.Data.dll和System.Xml.dll。ADO.NET向編寫托管代碼的開發(fā)人員提供了類似于ActiveX數(shù)據(jù)對(duì)象(ADO)為本機(jī)組件對(duì)象模塊(COM)開發(fā)人員提供的功能。</p><p>　　(1) ADO.NET設(shè)計(jì)目標(biāo)</p><p>　　隨著應(yīng)用程序開發(fā)的發(fā)展演變，新的應(yīng)用程序越來(lái)

57、越松散地耦合，通?；赪eb應(yīng)用程序模型。如今，越來(lái)越多的應(yīng)用程序使用XML來(lái)編碼要通過(guò)網(wǎng)絡(luò)連接傳遞的數(shù)據(jù)。Web應(yīng)用程序?qū)TTP用作在層間進(jìn)行通信的結(jié)構(gòu)，必須顯式處理請(qǐng)求之間的維護(hù)狀態(tài)。這一新模型大大不同于連接、緊耦合的編程風(fēng)格，此風(fēng)格曾是客戶端/服務(wù)器時(shí)代的標(biāo)志。在此編程風(fēng)格中，連接會(huì)在程序的整個(gè)生存期中保持打開，而不需要對(duì)狀態(tài)進(jìn)行特殊處理。</p><p>　　在設(shè)計(jì)符合當(dāng)今開發(fā)人員需要的工具和技術(shù)時(shí)，M

58、icrosoft認(rèn)識(shí)到需要為數(shù)據(jù)訪問(wèn)提供全新的編程模型，此模型是基于.NET Framework生成的?；?NET Framework這一點(diǎn)將確保數(shù)據(jù)訪問(wèn)技術(shù)的一致性，因?yàn)榻M件將共享通用的類型系統(tǒng)、設(shè)計(jì)模式和命名約定。</p><p>　　設(shè)計(jì)ADO.NET的目的是為了滿足這一新編程模型的以下要求：具有斷開式數(shù)據(jù)結(jié)構(gòu)；能夠與XML緊密集成；具有能夠組合來(lái)自多個(gè)不同數(shù)據(jù)源的數(shù)據(jù)的通用數(shù)據(jù)表示形式；以及具有為與數(shù)據(jù)

59、庫(kù)交互而優(yōu)化的功能，這些要求都是.NET Framework固有的內(nèi)容。</p><p>　　在創(chuàng)建ADO.NET時(shí)，Microsoft具有以下設(shè)計(jì)目標(biāo)：利用當(dāng)前的ActiveX數(shù)據(jù)類型(ADO)知識(shí)；支持N層編程模型；集成XML支持。</p><p>　　(2) 在ADO.NET中連接和檢索數(shù)據(jù)庫(kù)</p><p>　　任何數(shù)據(jù)庫(kù)應(yīng)用程序的一項(xiàng)主要功能是連接數(shù)據(jù)源并

60、檢索數(shù)據(jù)源中包含的數(shù)據(jù)。ADO.NET 的 .NET Framework數(shù)據(jù)提供程序充當(dāng)應(yīng)用程序和數(shù)據(jù)源之間的橋梁，使您可以執(zhí)行命令以及使用 DataReader 或 DataAdapter檢索數(shù)據(jù)。</p><p>　　在 ADO.NET中，通過(guò)在連接字符串中提供必要的身份驗(yàn)證信息，使用Connection 對(duì)象連接到特定的數(shù)據(jù)源。您使用的Connection對(duì)象取決于數(shù)據(jù)源的類型。.NET Framework

61、 提供的每個(gè).NET Framework數(shù)據(jù)提供程序包含一個(gè)Connection對(duì)象：OLE DB .NET Framework 數(shù)據(jù)提供程序包括一個(gè) OleDbConnection對(duì)象，SQL Server .NET Framework 數(shù)據(jù)提供程序包括一個(gè)SqlConnection對(duì)象、ODBC .NET Framework數(shù)據(jù)提供程序包括一個(gè) OdbcConnection對(duì)象，Oracle .NET Framework數(shù)據(jù)提供程序

62、包括一個(gè)OracleConnection對(duì)象。</p><p>　　當(dāng)建立與數(shù)據(jù)源的連接后，可以使用Command對(duì)象來(lái)執(zhí)行命令并從數(shù)據(jù)源中返回結(jié)果。您可以使用Command構(gòu)造函數(shù)來(lái)創(chuàng)建命令，該構(gòu)造函數(shù)采用在數(shù)據(jù)源、Connection對(duì)象和Transaction對(duì)象中執(zhí)行的SQL語(yǔ)句的可選參數(shù)。也可以使用Connection的 CreateCommand方法來(lái)創(chuàng)建用于特定連接的命令。您可以使用CommandT

63、ext屬性來(lái)查詢和修改Command對(duì)象的SQL語(yǔ)句。</p><p>　　(3) 使用SQL Server .NET Framework數(shù)據(jù)提供程序</p><p>　　通過(guò) SQL Server .NET Framework數(shù)據(jù)提供程序，可以使用自己的內(nèi)部協(xié)議訪問(wèn) SQL Server 7.0 版或更高版本的數(shù)據(jù)庫(kù)。該數(shù)據(jù)提供程序設(shè)計(jì)的功能與OLE DB、ODBC 和 Oracle的.

64、NET Framework數(shù)據(jù)提供程序的功能類似。</p><p>　　需要注意的是，要使用 SQL Server .NET Framework數(shù)據(jù)提供程序，應(yīng)用程序必須引用 System.Data.SqlClient命名空間。</p><p><b>　　2.3 本章小結(jié)</b></p><p>　　本章主要介紹了開發(fā)系統(tǒng)所需了解的背景知識(shí)

65、，主要包括Ajax技術(shù)，.NET Framework。它們對(duì)下一章系統(tǒng)的整體設(shè)計(jì)起到了一定的參考作用，只有在充分熟悉了本章內(nèi)容的基礎(chǔ)上才能輕松地進(jìn)入下一章的閱讀。</p><p>　　3 智能數(shù)字相冊(cè)系統(tǒng)的設(shè)計(jì)</p><p>　　3.1 總的設(shè)計(jì)目標(biāo)</p><p>　　本次設(shè)計(jì)的總體目標(biāo)是用高效、靈活的C#語(yǔ)言設(shè)計(jì)出操作性、實(shí)用性好的電子相冊(cè)軟件，并能夠?qū)崿F(xiàn)

66、圖像的導(dǎo)入和顯示、數(shù)據(jù)庫(kù)索引的建立、根據(jù)關(guān)鍵字檢索圖像、圖像的分類等功能。該系統(tǒng)比一般的數(shù)字相冊(cè)系統(tǒng)而言，更具有一定的智能性，例如：當(dāng)用戶需要某幅相片時(shí)，可以通過(guò)簡(jiǎn)單的人機(jī)交互，或者根據(jù)用戶使用記錄，自動(dòng)推薦出用戶可能需要的圖像，使得用戶可以獲得一款理想的圖像管理軟件。</p><p>　　3.2 需要解決的重點(diǎn)問(wèn)題</p><p>　　智能數(shù)字相冊(cè)系統(tǒng)的特殊性使得軟件的設(shè)計(jì)并不容易，主

67、要表現(xiàn)在：</p><p>　　(1) 圖像數(shù)據(jù)的存儲(chǔ)問(wèn)題</p><p>　　圖片文件不同于文本文件,它以二進(jìn)制方式存放于電腦中，因此實(shí)現(xiàn)圖片管理主要有以下兩種方式：第一種是將圖片直接放入數(shù)據(jù)庫(kù)對(duì)應(yīng)的表中，這種方式的優(yōu)點(diǎn)是實(shí)現(xiàn)了圖庫(kù)合一，但這種存儲(chǔ)方式對(duì)數(shù)據(jù)庫(kù)的容量和性能要求較高；另一種方式是將圖片以文件方式存放到服務(wù)器上，并將與圖片相關(guān)的信息和路徑存入對(duì)應(yīng)的數(shù)據(jù)表中，這種方式縮小了表的

68、大小,同時(shí)提高數(shù)據(jù)庫(kù)操作速度，故通常被基于B/S的系統(tǒng)所廣泛采用[10]。本文以第二種方式為基礎(chǔ)，詳細(xì)描述如何使用ASP.NET來(lái)構(gòu)建智能數(shù)字相冊(cè)系統(tǒng)。</p><p><b>　　(2) 圖像的檢索</b></p><p>　　圖像的檢索包括基于關(guān)鍵詞的檢索和基于內(nèi)容的檢索兩種方式。</p><p>　　基于關(guān)鍵詞的檢索是傳統(tǒng)的圖像檢索方式。

69、對(duì)圖像信息用關(guān)鍵詞或文本方式來(lái)進(jìn)行相應(yīng)的描述是不精確的，因?yàn)椴煌娜藢?duì)同一幅圖像或同一個(gè)人在不同的時(shí)間對(duì)同一幅圖像會(huì)有不同的理解，對(duì)不同的圖像的描述也很難遵循相同的標(biāo)準(zhǔn)。因此當(dāng)用戶輸入的檢索關(guān)鍵詞與系統(tǒng)中對(duì)圖像的描述信息不一致時(shí)，就檢索不到需要的圖像，從而導(dǎo)致檢索的失敗，同時(shí)隨著圖像信息的劇增，其查找效率也迅速降低。</p><p>　　基于內(nèi)容的檢索式近年來(lái)研究的重點(diǎn)，也提出了基于圖像紋理、基于圖像直方圖、基于

70、圖像色彩控件等多種檢索方式。但是，基于內(nèi)容的圖像檢索系統(tǒng)具有相當(dāng)?shù)碾y度，目前還沒(méi)有開發(fā)出可以針對(duì)任意圖像的，真正實(shí)用的基于內(nèi)容的圖像檢索系統(tǒng)，有的基于內(nèi)容的圖像檢索系統(tǒng)只是針對(duì)某一類特殊的圖像有效。隨著技術(shù)的進(jìn)步，基于內(nèi)容的圖像檢索是發(fā)展趨勢(shì)[11]。開發(fā)本系統(tǒng)的目的是管理珍貴的歷史資料圖片，每幅圖像的背景資料或相關(guān)信息也是需要保存和進(jìn)行圖像檢索的重要依據(jù)，而且需要管理的圖像五花八門，各種類別、格式、質(zhì)量、大小的圖像的存在使得在短時(shí)間內(nèi)

71、開發(fā)出基于內(nèi)容的圖像檢索系統(tǒng)幾乎是不可能的，所以本系統(tǒng)采用基于關(guān)鍵詞的檢索方式。</p><p>　　3.3 系統(tǒng)數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)</p><p>　　數(shù)據(jù)庫(kù)結(jié)構(gòu)設(shè)計(jì)是在完成了描述系統(tǒng)各種數(shù)據(jù)之間的依賴關(guān)系和信息分類的基礎(chǔ)上，將各種信息轉(zhuǎn)換成相應(yīng)的數(shù)據(jù)項(xiàng)定義表。數(shù)據(jù)項(xiàng)定義表的作用主要是定義每個(gè)表的表名、表中各字段的名稱、數(shù)據(jù)類型長(zhǎng)度和是否允許空，但在不同的數(shù)據(jù)庫(kù)，數(shù)據(jù)類型的表示符號(hào)和長(zhǎng)度有

72、所差別。本系統(tǒng)的數(shù)據(jù)庫(kù)建表如下：</p><p>　　(1) 圖片信息表，用于存放與圖片相關(guān)的信息，包括圖片的編號(hào)、圖片的上傳用戶、圖片的分類、圖片名稱、圖片的存放路徑、上傳時(shí)間以及圖片的描述信息等。</p><p>　　表3.1 圖片信息表</p><p>　　(2) 用戶信息表，用于存放用戶的信息，包括用戶名、用戶密碼、最近一次的登錄時(shí)間、允許登錄時(shí)間、是否鎖

73、定、聯(lián)系郵箱、是否公開以及身份證號(hào)碼（可選字段）。</p><p>　　表3.2 用戶信息表</p><p>　　3.4 系統(tǒng)功能設(shè)計(jì)</p><p>　　智能數(shù)字相冊(cè)系統(tǒng)需要實(shí)現(xiàn)的功能包括用戶的管理，以及圖片的管理和使用等。具體來(lái)講，它包含用戶管理中常見的注冊(cè)、登錄、修改用戶信息；圖片的管理和使用功能主要包括圖片的上傳、瀏覽、搜索、查看圖片詳細(xì)信息等操作。其總

74、體結(jié)構(gòu)如下圖3.1所示。</p><p>　　圖3.1 智能數(shù)字相冊(cè)系統(tǒng)功能結(jié)構(gòu)圖</p><p>　　3.4.1 圖片管理</p><p>　　圖片管理實(shí)現(xiàn)的關(guān)鍵是將圖片上傳到服務(wù)器，這涉及到原始圖片的上傳、生成原始圖片的縮略圖以及將與圖片相關(guān)的信息保存到數(shù)據(jù)庫(kù)等重要細(xì)節(jié)。</p><p>　　隨著互聯(lián)網(wǎng)的發(fā)展，各網(wǎng)站特別是一些BBS站

75、點(diǎn)為豐富資源，通常會(huì)提供圖像文件的上傳及顯示的功能。由于用戶提供的文件在格式及大小方面都不一致，尤其是圖像的大小。不合適的圖像大小可能會(huì)改變網(wǎng)頁(yè)的排版格式，使網(wǎng)頁(yè)變得不雅觀，而較大的文件長(zhǎng)度又會(huì)減慢網(wǎng)頁(yè)的響應(yīng)。另外，在Web開發(fā)中需要對(duì)用戶上傳的圖像文件建立相應(yīng)的縮略圖，這些功能的實(shí)現(xiàn)需要對(duì)圖像文件進(jìn)行處理，主要是圖像文件的格式及尺寸的調(diào)整。雖然在HTML標(biāo)記語(yǔ)言中可以在〈img〉標(biāo)記中加入width及height屬性來(lái)控制圖像的顯示大

76、小，但HTML語(yǔ)言不能對(duì)圖像大小進(jìn)行判斷，只能將所有的圖像以相對(duì)固定的格式來(lái)顯示，不能靈活的滿足多方面的要求。傳統(tǒng)方式對(duì)于這種情況的判斷處理通常是用JavaScript 或VBScript 來(lái)實(shí)現(xiàn)，ASP.NET的使用為靈活實(shí)現(xiàn)圖像的處理提供了新的途徑。ASP.NET的面向?qū)ο缶幊痰拈_發(fā)方式相對(duì)于傳統(tǒng)的腳本編程方式比較適合Web站點(diǎn)功能模塊化的需要[12]。本節(jié)針對(duì)在ASP.NET環(huán)境下實(shí)現(xiàn)圖像文件上傳進(jìn)行初步的探討。</p>

77、;<p>　　在模塊的實(shí)現(xiàn)過(guò)程中，用戶首先打開文件夾，選擇準(zhǔn)備上傳的圖片文件，系統(tǒng)提供預(yù)覽原始圖片的功能。然后點(diǎn)擊上傳按鈕，系統(tǒng)調(diào)用上傳過(guò)程并將生成的縮略圖保存到服務(wù)器上相應(yīng)的目錄中?？s略圖保持原始圖片的縱橫比并設(shè)定最大邊長(zhǎng)為100像素。圖片的名稱從URL中提取文件名，圖片的后綴保持原有后綴不變。同時(shí)，系統(tǒng)自動(dòng)將與該圖片相關(guān)的信息保存到數(shù)據(jù)庫(kù)中，圖片本身則保存在程序指定的文件夾中。在圖片上傳成功后，圖片的信息(如文件類型、

78、客戶端文件地址、文件名、擴(kuò)展名) 將會(huì)在上傳圖片頁(yè)面顯示出來(lái)。</p><p>　　在ASP.NET中可以使用HTML控件和標(biāo)準(zhǔn)控件：打開文件按鈕( file類型input ,屬于HtmlInputFile 類) 和提交按鈕（Button類型）來(lái)實(shí)現(xiàn)文件的上傳功能。</p><p><b>　　具體的用法如下：</b></p><p>　　&l

79、t;input type="file" size="50" name="File" onchange="Preview(this.value)"> </p><p>　　<asp:Button Runat="server" Text="開始上傳" ID="UploadBu

80、tton"></asp:Button></p><p>　　在打開文件按鈕中增加了響應(yīng)事件Preview(this.value)，用來(lái)實(shí)現(xiàn)上傳圖片的預(yù)覽功能。</p><p>　　在提交按鈕（Button類型）中增加runat =″server″，用以標(biāo)記為在服務(wù)器端運(yùn)行。</p><p>　　為將上傳的文件在服務(wù)器上進(jìn)行保存，可以使用：

81、</p><p>　　String fileName = System.IO.Path.GetFileName(postedFile.FileName);</p><p>　　postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("Files/") + fileName);</p>

82、<p>　　HtmlInputFile的成員PostedFile屬于HttpPostedFile類,該成員提供對(duì)上傳文件的操作接口，本例使用HttpPostedFile的成員函數(shù)SaveAs對(duì)上傳文件進(jìn)行保存，同時(shí)將上傳圖片的信息寫入數(shù)據(jù)庫(kù)。</p><p>　　本系統(tǒng)的上傳文件頁(yè)面可以實(shí)現(xiàn)多個(gè)文件同時(shí)上傳，</p><p>　　<input type="but

83、ton" value="增加(Add)" onclick="addFile()"></p><p>　　其中addFile()的函數(shù)處理流程如下：</p><p>　　1) 增加打開文件按鈕( file類型input，屬于HtmlInputFile類)和提交按鈕（Button類型）</p><p>　　var

84、str = '<INPUT type="file" size="50" NAME="File">' </p><p><b>　　2) 預(yù)覽圖片</b></p><p>　　onchange="Preview(this.value)"; </p>

85、<p>　　document.getElementById('MyFile').insertAdjacentHTML("beforeEnd", str);</p><p>　　3) 圖片描述部分的內(nèi)容</p><p>　　document.getElementById('txtAlbumDesc').nodeValue=&quo

86、t;";</p><p>　　同時(shí)，若在上傳過(guò)程中需要臨時(shí)改變上傳文件，還可以點(diǎn)擊重置按鈕，即將頁(yè)面數(shù)據(jù)恢復(fù)到原始狀態(tài)。</p><p>　　<input onclick="this.form.reset()" type="button" value="重置(ReSet)"></p><p

87、>　　3.4.2 圖片檢索 </p><p>　　本節(jié)將仿照Google Suggest，使用Ajax技術(shù)實(shí)現(xiàn)動(dòng)態(tài)獲取搜索提示的功能。與傳統(tǒng)的搜索相比，使用Ajax技術(shù)的搜索提示，能及時(shí)地給用戶提供參考的關(guān)鍵字。對(duì)用戶來(lái)說(shuō)，無(wú)需提交頁(yè)面就可以獲得提示，節(jié)省了大量的時(shí)間。</p><p>　　當(dāng)用戶需要查看數(shù)據(jù)庫(kù)服務(wù)器中的某些特定圖片時(shí),可以通過(guò)圖片檢索模塊快速定位到需要查找的圖片。

88、本模塊提供按圖片名稱作為關(guān)鍵字的圖片查詢，系統(tǒng)在圖片記錄數(shù)據(jù)表中進(jìn)行關(guān)鍵字模糊匹配檢索，并返回檢索到的所有縮略圖，進(jìn)行分頁(yè)顯示?？紤]到用戶在檢索圖片時(shí)更關(guān)注圖片本身的內(nèi)容，系統(tǒng)采用可分頁(yè)的DataList控件來(lái)顯示查詢結(jié)果(包括縮略圖)，同時(shí)使用新頁(yè)面來(lái)顯示原始圖片及其相關(guān)信息，新頁(yè)面中采用的是DetailsView控件綁定數(shù)據(jù)實(shí)現(xiàn)的。</p><p>　　(1) 基本原理分析</p><p&

89、gt;　　搜索提示的基本原理是：當(dāng)用戶每輸入完一個(gè)關(guān)鍵字時(shí)，便向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器端根據(jù)用戶當(dāng)前輸入的關(guān)鍵字，在數(shù)據(jù)庫(kù)中搜索相關(guān)的關(guān)鍵字信息，并返回給客戶端[13]。在實(shí)現(xiàn)搜索時(shí)需要注意以下幾點(diǎn)：</p><p>　　1) 當(dāng)鍵盤釋放時(shí)，也就是使觸發(fā)onkeyup事件時(shí)，需要向服務(wù)器發(fā)送請(qǐng)求；</p><p>　　2) 需要關(guān)閉文本框?yàn)g覽器自帶的提示，以免影響搜索提示，也就是要將文本框

90、</p><p>　　屬性設(shè)置為：autocomplete=”off”；</p><p>　　3) 當(dāng)出現(xiàn)搜索提示后，將選中的搜索提示突出顯示，以示區(qū)別。這種效果可以通過(guò)改變CSS來(lái)實(shí)現(xiàn)。</p><p>　　圖3.2 搜索提示基本原理示意圖</p><p>　　(2) 客戶端原理分析</p><p>　　在搜索提示

91、的界面文件上，包括一個(gè)輸入框和一個(gè)提交按鈕。其中輸入框用來(lái)輸入關(guān)鍵字。</p><p>　　<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocompl

92、ete="off" /></p><p>　　<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" runat="server" /><

93、;/p><p>　　在以上的方法中可以發(fā)現(xiàn)，當(dāng)輸入框觸發(fā)onkeyup事件時(shí)會(huì)調(diào)用searchSuggest()方法，該方法取回所需要的數(shù)據(jù)，客戶端獲取數(shù)據(jù)的流程如圖3.3所示。</p><p>　　圖3.3 客戶端處理數(shù)據(jù)流程圖</p><p>　　searchSuggest()方法的作用是向服務(wù)器發(fā)送請(qǐng)求。使用該方法前，要先定義一個(gè)XMLHttpRequest對(duì)象

94、，然后創(chuàng)建該對(duì)象。需要注意的是，該方法要根據(jù)不同瀏覽器返回不同的XMLHttpRequest對(duì)象。</p><p>　　返回后的數(shù)據(jù)通過(guò)handleSearchSuggest()方法來(lái)處理。該方法首先將返回的數(shù)據(jù)分割成數(shù)組，然后將數(shù)組中的數(shù)據(jù)組織成HTML代碼的格式，最后顯示到搜索結(jié)果的圖層中。整個(gè)方法的邏輯處理流程如圖3.4所示。</p><p>　　圖3.4 handleSearch

95、Suggest()方法邏輯處理流程圖</p><p>　　suggestOver()和suggestOut()方法是改變鼠標(biāo)移動(dòng)和移出該選項(xiàng)時(shí)的CSS樣式表。當(dāng)用戶輸入“L”時(shí)，客戶端如下圖所示：</p><p>　　圖3.5 輸入關(guān)鍵字后的客戶端</p><p>　　服務(wù)器端返回的字符串如下：</p><p>　　Landscape fi

96、ve|Landscape four|Landscape one|Landscape six|Landscape three|Landscape two|landscape14a.jpg|</p><p>　　然后，將上述字符串以“|”將其分割成若干子串，存入數(shù)組中，循環(huán)該數(shù)組，將數(shù)組中的內(nèi)容顯示到前臺(tái)的div層中。</p><p>　　由于服務(wù)器端可以實(shí)現(xiàn)模糊搜索，于是當(dāng)用戶輸入“L”后，

97、點(diǎn)擊Search按鈕，數(shù)據(jù)庫(kù)圖片關(guān)鍵字中所有以字母“L”開頭的圖片將會(huì)顯示在頁(yè)面上。</p><p>　　(3) 服務(wù)器端原理分析</p><p>　　客戶端發(fā)送查詢關(guān)鍵字的請(qǐng)求后，服務(wù)器端使用doPost()方法處理該請(qǐng)求，注意需要在服務(wù)端頁(yè)面設(shè)置AutoEventWireup="false"，否則服務(wù)器端會(huì)處理兩次客戶端的請(qǐng)求。</p><p&g

98、t;　　服務(wù)器端接收到該請(qǐng)求后，首先獲得用戶輸入的關(guān)鍵字，然后查詢數(shù)據(jù)庫(kù)，并將查詢結(jié)果保存到ArrayList中，最后將ArrayList中的數(shù)據(jù)組織成客戶端所需要的格式，返回給客戶端[14]。doPost()方法處理的邏輯流程如下圖所示。</p><p>　　圖3.6 圖像檢索服務(wù)器端處理邏輯流程圖</p><p>　　當(dāng)點(diǎn)擊某一幅圖片時(shí)或其名字說(shuō)明時(shí)，將進(jìn)入另一頁(yè)面，該頁(yè)面顯示圖片在

99、數(shù)據(jù)庫(kù)中的詳細(xì)信息。圖片搜索頁(yè)面運(yùn)行后的效果如第四章圖4.5，圖4.6所示。</p><p>　　3.4.3 圖片瀏覽</p><p>　　本節(jié)將使用Ajax技術(shù)實(shí)現(xiàn)無(wú)刷新即可瀏覽圖片。瀏覽圖片時(shí)，自動(dòng)向服務(wù)器端發(fā)送請(qǐng)求，查詢?cè)擃悇e下的照片，并顯示到客戶端。用戶也可以根據(jù)喜好隨時(shí)改變相冊(cè)的風(fēng)格。瀏覽相片的整個(gè)過(guò)程無(wú)需刷新頁(yè)面。第四章圖4.4所示為相冊(cè)瀏覽頁(yè)面的示意圖。</p>

100、<p>　?。ㄒ唬?基本原理分析</p><p>　　(1) 界面設(shè)計(jì)分析</p><p>　　在圖4.4所示的的頁(yè)面中，每個(gè)選項(xiàng)卡對(duì)應(yīng)相片的一個(gè)分類，單擊該選項(xiàng)卡時(shí)可以獲得該分類的所有圖片。當(dāng)單擊某個(gè)圖片時(shí)，圖片將放大顯示。選項(xiàng)卡是由無(wú)序列表<ul>元素來(lái)實(shí)現(xiàn)的，每個(gè)選項(xiàng)卡中的圖片是由嵌套的<ul>元素顯示的。</p><p>

101、;　　以選項(xiàng)卡的第二個(gè)選項(xiàng)為例：</p><p>　　<li><a class="hide" onmouseover="getPictures('tree')">Trees</a></p><p><b>　　<ul></b></p><p>

102、;　　<li id="tree"> </li><!- - 顯示圖片區(qū)- -></p><p><b>　　</ul></b></p><p><b>　　</li></b></p><p>　　圖3.7為未單擊選項(xiàng)卡時(shí)的效果，圖3.8為單擊了T

103、rees選項(xiàng)卡時(shí)的效果，如圖所示。</p><p>　　圖3.7 單擊之前的選項(xiàng)卡</p><p>　　圖3.8 單擊Trees后的選項(xiàng)卡</p><p>　　每一個(gè)選項(xiàng)卡是一個(gè)<li>元素，設(shè)置該元素的CSS可以使之呈現(xiàn)上圖中的效果。</p><p>　　當(dāng)鼠標(biāo)移動(dòng)到Trees選項(xiàng)時(shí)，調(diào)用getPictures('t

104、ree')方法。該方法的作用是，創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，并向服務(wù)器發(fā)送該請(qǐng)求。該方法的處理流程如下：</p><p>　　1) 首先需要定義全局變量ajaxObject，保存XMLHttpRequest對(duì)象；</p><p>　　2) 創(chuàng)建XMLHttpRequest請(qǐng)求：ajaxObject = createAjaxObj()；</p><p

105、>　　3) 當(dāng)請(qǐng)求狀態(tài)變化時(shí)調(diào)用changeStateFunction方法：changStateFunction(category); 4) 將客戶端的請(qǐng)求發(fā)送到服務(wù)器的地址：</p><p>　　var submitURL="PhotoService.aspx?cate=" + category; </p><p>　　5) 調(diào)用XMLHttpRequest對(duì)

106、象的open方法建立連接：</p><p>　　ajaxObject.open("GET", submitURL, true)；</p><p>　　6) 調(diào)用XMLHttpRequest對(duì)象的send方法發(fā)送請(qǐng)求：</p><p>　　ajaxObject.send(null); </p><p>　　7) 請(qǐng)求未完

107、成時(shí)顯示loading狀態(tài)： </p><p>　　var elmt = document.getElementById(category)；</p><p>　　elmt.innerHTML = "Loading"；</p><p>　　(2) 圖片放大原理分析</p><p>　　當(dāng)用戶單擊某個(gè)圖片時(shí)，該圖片會(huì)自動(dòng)

108、放大。其原理很簡(jiǎn)單，是通過(guò)設(shè)置圖片的CSS外觀來(lái)實(shí)現(xiàn)的。當(dāng)鼠標(biāo)移動(dòng)到該圖片上時(shí)，改變圖片的大小和位置，從而呈現(xiàn)出放大的動(dòng)態(tài)效果。</p><p><b>　　動(dòng)態(tài)更換皮膚</b></p><p>　　當(dāng)單擊界面中的更改外觀風(fēng)格選項(xiàng)時(shí)，調(diào)用switchStyle方法來(lái)更改頁(yè)面的CSS外觀。該方法的原理是：首先設(shè)置好兩個(gè)不同風(fēng)格的CSS文件，當(dāng)調(diào)用該方法時(shí)，查找HTML代

109、碼內(nèi)<head>元素中有關(guān)CSS樣式表的文件，然后更改該樣式表文件的鏈接地址，使之采用另一個(gè)樣式表文件的風(fēng)格。</p><p>　　該方法的處理流程如下：</p><p>　　獲得<head>元素<link>元素：var cssfile = document.getElementsByTagName("link&quo

110、t;)[0]; </p><p>　　如果該樣式表的鏈接地址為file1，則改為file2的地址：</p><p>　　if (cssfile.getAttribute("href") == file1)</p><p>　　cssfile.setAttribute("href", file2);</p><

111、;p>　　3) 否則直接設(shè)置為file1的地址：cssfile.setAttribute("href", file1); </p><p>　?。ǘ?客戶端原理分析</p><p>　　如何獲取圖片并顯示在客戶端呢？這里使用了XMLHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)送請(qǐng)求，在取回該分類下的圖片數(shù)據(jù)后，將其顯示到客戶端[15]。這是一種動(dòng)態(tài)的獲取數(shù)據(jù)方法，整個(gè)