基于php實現(xiàn)的web圖片共享系統(tǒng)

1、<p>　　基于PHP實現(xiàn)的WEB圖片共享系統(tǒng)</p><p><b>　　摘 要</b></p><p>　　本系統(tǒng)主要從現(xiàn)代社會電腦化觀念出發(fā)，通過對現(xiàn)有資料的分析、研究和整理，確定了在基于現(xiàn)存的WEB2.0模式下開發(fā)圖片共享系統(tǒng)的可行性、緊迫性和必要性。在現(xiàn)階段,國內(nèi)基于WEB2.0的圖片共享系統(tǒng)才剛起步,該市場還有很大的介入空間。其中，在國外，已經(jīng)

2、有了很成熟的圖片共享平臺。在WEB2.0時代，信息由以前的服務(wù)器發(fā)布變成了用戶發(fā)布。也就是從以前的通過服務(wù)器搜集資源并且發(fā)布變成了通過用戶提供資源，服務(wù)器進(jìn)行整理，分類，發(fā)布的模式。而且這種模式對于一個網(wǎng)站的用戶吸引度也遠(yuǎn)遠(yuǎn)高于傳統(tǒng)模式。</p><p>　　本論文旨在詳細(xì)說明如何在基于PHP以及Ajax框架的環(huán)境下，使用MVC的開發(fā)模式，完成一個具有完整功能的圖片上傳以及圖片管理系統(tǒng)，并能夠?qū)崿F(xiàn)方便的添加，刪除

3、圖片以及分類，后臺主要實現(xiàn)對用戶以及用戶的圖片進(jìn)行管理；能實現(xiàn)相關(guān)個人的設(shè)置更改。并且系統(tǒng)中對于圖片上傳需要有比較直觀的進(jìn)度顯示，圖片的呈現(xiàn)使用比較友善的顯示效果。</p><p>　　關(guān)鍵詞：模型-視圖-控制器；圖片共享；Ajax</p><p>　　A Picture Share System Based on PHP</p><p><b>　　Ab

4、stract</b></p><p>　　This system mainly embarks from the modern society computerization. Based on existence information analysis, the research and the reorganization, we considered the pressing and the

5、necessity of implementing order form developing picture share system base on WEB2.0.At the present stage, the domestic picture share system based on WEB2.0 is just underway. There is expansive to take part in this field

6、, at the same time, mature picture share system aboard is already exist for a long time. In WEB2.0 </p><p>　　This thesis mainly describes how to developing fully functional pictures upload and picture manage

7、ment system. This system can easy to add, delete pictures and categories. In the backstage management, is mainly to implementing user and pictures management and user information changing. In this system, picture uploadi

8、ng is intuitionisticly showing, and the picture is need to be shown user friendly.</p><p>　　Key words: MVC; Picture Share; Ajax</p><p><b>　　目 錄</b></p><p><b>　　論文

9、總頁數(shù)：36頁</b></p><p><b>　　1引言1</b></p><p><b>　　2系統(tǒng)概述1</b></p><p><b>　　3總體設(shè)計2</b></p><p>　　3.1系統(tǒng)需求分析2</p><p>

10、;　　3.1.1圖片上傳需要支持的方式2</p><p>　　3.1.2用戶上傳圖片需要支持的格式2</p><p>　　3.1.3分類2</p><p>　　3.1.4圖片管理2</p><p>　　3.1.5圖片展現(xiàn)3</p><p>　　3.1.6查詢功能3</p><

11、p>　　3.1.7用戶管理3</p><p>　　3.2總體結(jié)構(gòu)3</p><p>　　3.3圖片共享系統(tǒng)流程3</p><p>　　3.4圖片共享系統(tǒng)模塊功能介紹5</p><p>　　3.4.1用戶界面子模塊劃分5</p><p>　　3.4.2管理后臺子模塊劃分7</p>

12、<p><b>　　4方案選擇8</b></p><p>　　4.1方案比較8</p><p>　　4.1.1系統(tǒng)模式比較8</p><p>　　4.1.2程序語言比較8</p><p>　　4.2方案選擇9</p><p>　　4.3系統(tǒng)技術(shù)平臺9</

13、p><p>　　4.4開發(fā)環(huán)境搭建9</p><p>　　5實現(xiàn)技術(shù)與數(shù)據(jù)結(jié)構(gòu)12</p><p>　　5.1系統(tǒng)架構(gòu)設(shè)計12</p><p>　　5.1.1網(wǎng)絡(luò)架構(gòu)12</p><p>　　5.1.2系統(tǒng)邏輯服務(wù)器12</p><p>　　5.2系統(tǒng)處理流程13</p

14、><p>　　5.2.1基于MVC的Smartemplate架構(gòu)13</p><p>　　5.2.2SmartTemplate技術(shù)概述14</p><p>　　5.2.3SmartTemplate與html模版之間的關(guān)系15</p><p>　　5.3數(shù)據(jù)庫設(shè)計18</p><p>　　5.3.1前臺用戶

15、主要數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計21</p><p>　　5.3.2管理后臺數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計22</p><p>　　6特殊問題解決辦法24</p><p>　　6.1亂碼問題24</p><p>　　6.2動態(tài)顯示上傳進(jìn)度24</p><p>　　6.3圖片隨意批量上傳問題25</p><

16、;p>　　7結(jié)果測試、性能分析29</p><p>　　7.1運行模塊組合29</p><p>　　7.2系統(tǒng)登陸界面29</p><p>　　7.3模塊應(yīng)用舉例30</p><p>　　7.4系統(tǒng)現(xiàn)存問題33</p><p>　　7.4.1批量上傳連接的URL參數(shù)泄漏33</p&g

17、t;<p>　　7.4.2批量上傳頁面源代碼中回調(diào)腳本泄漏用戶ID33</p><p>　　7.4.3無法正常返回33</p><p>　　7.5改進(jìn)意見34</p><p><b>　　結(jié) 論34</b></p><p><b>　　參考文獻(xiàn)34</b><

18、/p><p><b>　　致 謝35</b></p><p><b>　　聲 明36</b></p><p>　　商業(yè)源代碼，全套計算機畢業(yè)設(shè)計免費下載 http://www.ibaidusoft.com</p><p>　　更多全套設(shè)計聯(lián)系QQ:1042897696</p>

19、<p>　　最新設(shè)計大全 http://www.bylw168.com/sf/20100915/3539.html</p><p><b>　　引言</b></p><p>　　隨著前段時間WEB2.0的熱潮，整個BS開發(fā)方向和WEB的運營模式漸漸開始向另一個方向轉(zhuǎn)變。隨著AJAX的重新使用，大大提高了用戶的WEB體驗。其頁面局部刷新的方式在很大程度上減

20、少了用戶訪問頁面時所花的時間。并且讓用戶在提高體驗的同時，也能夠參與的內(nèi)容的提供者里面來。在傳統(tǒng)的WEB系統(tǒng)中，都是有某個網(wǎng)站的管理員，或者類似的人去收集網(wǎng)站所需要的資源，并且將這些資源發(fā)布出去，但是隨著WEB2.0的興起，分享和體驗逐漸占據(jù)了網(wǎng)站發(fā)展的重要的位置。于是，網(wǎng)站從以前的集中發(fā)布式，漸漸的轉(zhuǎn)變成了用戶提供資源，網(wǎng)站整理發(fā)布的模式。其中最為常見的就是BLOG，WIKI這些形勢。其中圖片共享是很有發(fā)展?jié)摿Φ囊粋€方向。首先，中國擁

21、有數(shù)碼相機的人群正在以一個穩(wěn)定的數(shù)值在不斷增長，但是，目前沒有多少網(wǎng)站注意到了這片市場的潛力。當(dāng)用戶拍了照片后，他們會找一個可以方便的共享自己所拍的照片的地方。但是，現(xiàn)在傳統(tǒng)的網(wǎng)站，要么操作太復(fù)雜，要么就是不方便共享，比如163，不支持外部連接圖片，雖然這樣做的確可以明顯的降低服務(wù)器的負(fù)擔(dān)，但是對用戶體驗卻大大折扣。試想，當(dāng)一個用戶想直接給朋友看他某個相冊里面的某一張圖片的時候，</p><p>　　就目前看來，

22、圖片共享系統(tǒng)現(xiàn)在需要解決的問題主要是如何更快的讓用戶上傳圖片。如何以更快的形式顯示圖片。其中，影響到系統(tǒng)開發(fā)的主要有以下問題：1、市場競爭，2、軟件的可用性，穩(wěn)定性，3、時間限制。由于目前已經(jīng)有部分市場被前期對手搶占，所以需要在盡可能短的時間內(nèi)開發(fā)出一個可用的網(wǎng)站系統(tǒng)。該系統(tǒng)初步分為兩個部分，一個是作為WEB界面的WEB端，還有一個部分是用來通過C/S模式遠(yuǎn)程上傳本地圖片的客戶端工具。</p><p><b

23、>　　系統(tǒng)概述</b></p><p>　　在對于由經(jīng)用戶提交的的方式來實現(xiàn)圖片共享,首要就是提高用戶上傳效率，以及用戶上傳體驗和用戶的瀏覽是否方便。一般的圖片共享網(wǎng)站都是通過很單一的上傳頁面對文件進(jìn)行上傳，并且展現(xiàn)形式單一化，不方便用戶使用和查看。在WEB2.0下，誕生了大批用于增強用戶體驗的控件，使得圖片共享比傳統(tǒng)的形式更加的美觀以及人性化。</p><p>　　而且

24、除了需要良好的用戶體驗外，還需要良好的系統(tǒng)支持。不僅僅是程序，而是隨著用戶需求可以不斷拓展的業(yè)務(wù)平臺，以及發(fā)展流程。本畢業(yè)設(shè)計就是根據(jù)目前WEB2.0的需求和特點有針對的利用現(xiàn)在比較成熟的框架所編寫。</p><p>　　應(yīng)用WEB2.0中已經(jīng)成熟的框架接口可以大大加快目前高可用性應(yīng)用的開發(fā)以及設(shè)計。并且能夠從用戶角度來設(shè)計一個應(yīng)用。大大減輕了設(shè)計的壓力以及風(fēng)險。該系統(tǒng)能夠通過多種方式來對用戶的圖片進(jìn)行上傳以及管

25、理。并且使用了現(xiàn)在比較流行的視覺框架來實現(xiàn)圖片的呈現(xiàn)，大大改進(jìn)了用戶體驗。</p><p><b>　　總體設(shè)計</b></p><p><b>　　系統(tǒng)需求分析</b></p><p>　　圖片共享，有三個方面需要考慮：一，用戶應(yīng)該以什么方式上傳圖片；二，用戶可以上傳的圖片有哪些類型；三，應(yīng)該以什么方式展示這些圖片。另外

26、，還應(yīng)該實現(xiàn)對圖片的簡單整理以及統(tǒng)計。</p><p>　　因此，將上傳圖片的用戶和瀏覽圖片的用戶作為系統(tǒng)服務(wù)的主要目標(biāo)，對系統(tǒng)的功能提出了如下需求：</p><p>　　圖片上傳需要支持的方式</p><p>　　圖片上傳應(yīng)該支持目前使用最多的頁面表單方式。并且可以對其進(jìn)行簡單的處理。</p><p>　　除此之外，最好還要支持客戶端方式。

27、并且需要實現(xiàn)在用戶不安裝客戶端的情況下，在WEB上實現(xiàn)批量上傳圖片。</p><p>　　用戶上傳圖片需要支持的格式</p><p>　　一種是JPEG一種是PNG，現(xiàn)在大多數(shù)的數(shù)碼相機都是使用JPEG格式保存圖片，但是考慮到版權(quán)問題，也應(yīng)提供PNG格式圖片的支持。</p><p><b>　　分類</b></p><p&g

28、t;　　圖片上傳后,根據(jù)圖片的標(biāo)簽以及圖片所在任務(wù)自動將圖片按照標(biāo)簽以及任務(wù)進(jìn)行分類</p><p><b>　　圖片管理 </b></p><p>　　圖片管理應(yīng)該包括的基本內(nèi)容：圖片的刪除，圖片的添加，圖片分類的添加以及刪除，圖片任務(wù)的添加以及刪除，圖片標(biāo)簽的添加以及刪除。</p><p>　　同時，在圖片管理中，用戶能夠以比較直觀的方式查

29、看自己上傳的圖片。</p><p><b>　　圖片展現(xiàn)</b></p><p>　　應(yīng)該能夠很直觀的展示給最終用戶進(jìn)行查看。</p><p><b>　　查詢功能</b></p><p>　　用戶需要了解自己的分類下的圖片總量以及任務(wù)下的圖片情況，又因為用戶可能需要根據(jù)不同的情況下，對自己的分類，

30、任務(wù)下的圖片情況做統(tǒng)計，因此該系統(tǒng)還應(yīng)具有分類，任務(wù)，標(biāo)簽的多條件組合查詢功能。</p><p>　　由于該系統(tǒng)為多用戶系統(tǒng)，系統(tǒng)后臺還應(yīng)該具有用戶管理功能</p><p>　　用戶管理包括的功能如下：用戶的添加，刪除，查詢。以及對用戶圖片的查看，刪除；對用戶的分類的查看，刪除；對用戶標(biāo)簽的查看，刪除。</p><p><b>　　總體結(jié)構(gòu)</b&g

31、t;</p><p>　　圖片共享系統(tǒng)主要功能模塊結(jié)構(gòu)示意圖如下：</p><p>　　圖3-1 圖片共享系統(tǒng)功能模塊圖</p><p>　　圖片共享系統(tǒng)包括兩大部分：用戶界面和后臺管理，其中用戶界面為用戶可視并且可使用的功能，后臺管理為管理員所能使用的功能。</p><p><b>　　圖片共享系統(tǒng)流程</b><

32、/p><p>　　圖片共享系統(tǒng)流程設(shè)計思想如下：</p><p>　　用戶（這里主要指直接使用本系統(tǒng)的最終用戶，不包括后臺具有管理功能的用戶）根據(jù)自己的圖片格式，選擇合適的圖片上傳到本系統(tǒng)的處理端。</p><p>　　系統(tǒng)在接到用戶上傳的圖片后，應(yīng)根據(jù)系統(tǒng)當(dāng)前所允許上傳的圖片的類型判斷用戶所上傳的文件是否符合系統(tǒng)的要求，確定用戶為上傳圖片所分配的標(biāo)簽，依據(jù)上傳圖片的設(shè)

33、置對圖片進(jìn)行分類以及更改格式，此時的圖片并非最后存儲在系統(tǒng)中的圖片，該圖片在經(jīng)過裁減以及根據(jù)系統(tǒng)設(shè)定更改后的格式進(jìn)行存儲。（這樣做，是為了統(tǒng)一圖片的格式，便于輸出的處理以及圖片入庫時統(tǒng)一處理接口。）</p><p>　　圖片添加成功后，將上傳的圖片直接緩存到用戶所在的文件夾下，按照上傳日期排列，并且同時在數(shù)據(jù)庫中保存圖片的副本。</p><p>　　圖片在存儲后，同時在前臺顯示已經(jīng)上傳的圖

34、片，并且將圖片添加到所設(shè)定的標(biāo)簽下，并且按照任務(wù)對圖片進(jìn)行分批顯示。</p><p>　　用戶在用戶管理臺里面可以對當(dāng)前所有圖片進(jìn)行管理，用戶刪除圖片時，可以按照單個圖片，分類，標(biāo)簽，以及任務(wù)對圖片進(jìn)行刪除操作。</p><p>　　已經(jīng)上傳的圖片，可以通過用戶查看圖片的連接直接提供給第三方用戶進(jìn)行查看?；蛘咧苯油ㄟ^系統(tǒng)生成的連接發(fā)送給第三方用戶進(jìn)行查看。</p><p

35、>　　后臺管理員可以通過系統(tǒng)提供的功能直接對管理用戶進(jìn)行添加以及更改。當(dāng)需要具體賦予用戶某個功能時，可以通過更改后臺用戶的細(xì)節(jié)設(shè)定來更改用戶權(quán)限。</p><p>　　管理員在需要刪除某個用戶的上傳圖片時，也可通過統(tǒng)一的圖片管理接口對用戶的圖片，分類，標(biāo)簽以及任務(wù)進(jìn)行刪除。</p><p>　　圖片共享系統(tǒng)流程圖如下：</p><p>　　圖3-2 圖片共享系

36、統(tǒng)流程圖</p><p>　　圖片共享系統(tǒng)模塊功能介紹</p><p>　　圖片共享系統(tǒng)，主要完成圖片的添加，刪除以及圖片標(biāo)簽的添加，刪除功能。以及對多用戶的管理以及在后臺對用戶的圖片進(jìn)行管理。以下是子模塊劃分以及各模塊的功能介紹。</p><p><b>　　用戶界面子模塊劃分</b></p><p>　　圖3-3用戶

37、界面子模塊結(jié)構(gòu)圖</p><p>　　用戶界面子模塊 — 密碼修改</p><p>　　密碼修改，作為用戶界面子模塊的一部分，主要完成用戶密碼修改的工作。執(zhí)行流程是：用戶在登陸到主界面后，點擊導(dǎo)航欄上的密碼修改，轉(zhuǎn)向到修改用戶密碼的界面。在輸入當(dāng)前使用密碼以及修改的密碼并且重復(fù)輸入一次修改的密碼，最后填入該操作的驗證碼（為了方便用戶，驗證碼已經(jīng)由后臺自動填入）。當(dāng)以上操作完成后，用戶點擊提

38、交以對密碼進(jìn)行修改。</p><p>　　在用戶提交修改內(nèi)容時，頁面內(nèi)的代碼首先檢測用戶兩次修改的密碼是否一致。如果不一致，將提示用戶密碼不一致。當(dāng)該檢查通過后，信息提交到后臺系統(tǒng)。后臺系統(tǒng)首先判斷驗證碼是否相同，如果相同，將比較用戶輸入的當(dāng)前密碼散列是否和數(shù)據(jù)庫中的密碼散列一致。當(dāng)兩個散列一致時，后臺系統(tǒng)將修改用戶當(dāng)前的密碼為用戶修改后的密碼。如果用戶沒有輸入驗證碼或者驗證碼出錯，當(dāng)前用戶密碼散列無法和數(shù)據(jù)庫中

39、的密碼散列對應(yīng)，系統(tǒng)將給出對應(yīng)的出錯提示。并要求用戶重新填寫。</p><p>　　用戶界面子模塊 — 上傳圖片</p><p>　　上傳圖片，在用戶登陸系統(tǒng)后，點擊導(dǎo)航欄上的上傳圖片，進(jìn)入上傳圖片功能頁面。此時，用戶可以根據(jù)自己的需要選擇單個圖片進(jìn)行上傳或者直接批量上傳多個圖片。１）對單個頁面進(jìn)行上傳：這種上傳需要用戶自己過濾不符合系統(tǒng)需求的圖片，當(dāng)前系統(tǒng)只支持JPEG以及PNG。如果圖

40、片格式不符合要求，系統(tǒng)將給出出錯提示。當(dāng)用戶所選擇的圖片格式無誤，并點擊“開始上傳”，此時，系統(tǒng)會彈出一個設(shè)置圖片信息的對話框，需要用戶選擇該圖片的類型，以及設(shè)置該圖片的標(biāo)簽還有該圖片的名稱等信息。當(dāng)一切設(shè)置完畢后，點擊“提交上傳”，用戶圖片開始上傳到系統(tǒng)中。２）直接批量上傳多個圖片：用戶點擊“批量上傳”標(biāo)簽，系統(tǒng)提示該功能需要JAVA運行時支持，確認(rèn)后，進(jìn)入批量圖片信息設(shè)定頁面，該頁面用于設(shè)置接下來所上傳的圖片的名稱，描述，分類，標(biāo)簽

41、等信息。接下來將轉(zhuǎn)入批量上傳界面。具體的操作步驟說明在批量上傳頁面中有詳細(xì)的說明。</p><p>　　用戶界面子模塊 — 管理圖片</p><p>　　管理圖片，在用戶登陸系統(tǒng)后，點擊導(dǎo)航欄上的上傳圖片，進(jìn)入圖片管理頁面。</p><p>　　該頁面分為上中下3個部分，分別為用戶圖片按照任務(wù)，分類，標(biāo)簽進(jìn)行分類后的圖片列表。在這個列表里，用戶可以對圖片按照任務(wù)，分

42、類，或者標(biāo)簽等批量對圖片進(jìn)行操作。同時，在該功能頁面中，也可以對分類，任務(wù)，標(biāo)簽進(jìn)行刪除操作。</p><p><b>　　管理后臺子模塊劃分</b></p><p>　　圖3-4管理后臺子模塊結(jié)構(gòu)圖</p><p>　　管理后臺子模塊 — 系統(tǒng)管理</p><p>　　系統(tǒng)管理作為后臺管理的一個重要部分，主要是用于設(shè)置

43、當(dāng)前系統(tǒng)的環(huán)境變量，以及一些說明性的信息。主要是由后臺管理員對系統(tǒng)進(jìn)行維護(hù)以及系統(tǒng)初始化的時候確定這些設(shè)置。在設(shè)置完成后，如果不是系統(tǒng)性能問題或者系統(tǒng)遷移，均可以保持設(shè)定的信息。</p><p>　　這個功能為系統(tǒng)提供了比較方便的擴展系統(tǒng)環(huán)境變量的方法。便于后期對系統(tǒng)的常規(guī)設(shè)定的修改以及方便系統(tǒng)的簡單遷移，例如系統(tǒng)更換域名或者更改其他系統(tǒng)環(huán)境信息。</p><p>　　系統(tǒng)信息表中記錄了系

44、統(tǒng)的每個設(shè)定，對該模塊進(jìn)行修改最后將反饋到系統(tǒng)信息表中。</p><p>　　管理后臺子模塊 — 管理員管理</p><p>　　管理員管理，主要是用于設(shè)置能夠?qū)Ξ?dāng)前系統(tǒng)后臺的功能進(jìn)行操作的用戶，以及設(shè)置這些用戶可以使用后臺哪些功能。該功能使得后臺管理更為靈活，可以方便的進(jìn)行權(quán)限托管。并且可以設(shè)置對某個功能專門進(jìn)行操作的管理人員，簡化了管理的復(fù)雜程度。</p><p&g

45、t;　　這個功能為系統(tǒng)提供了比較方便的擴展系統(tǒng)管理團(tuán)隊的方法。以便于在中后期對某個功能管理達(dá)到一定要求時可以對該功能賦予專用人員。</p><p>　　同時，該模塊也提供了修改管理員信息的功能?？梢苑奖愕氖乖摴芾韱T在各個功能之間實現(xiàn)切換以及更改現(xiàn)有權(quán)限。</p><p>　　管理后臺子模塊 — 用戶管理</p><p>　　用戶管理用于管理當(dāng)前系統(tǒng)中已經(jīng)正常注冊并且

46、使用本系統(tǒng)的圖片共享功能的用戶。用戶要注冊該系統(tǒng)，除了可以在前臺提供的注冊頁面注冊外，也可以由具有用戶管理權(quán)限的后臺管理員在后臺進(jìn)行添加。除了用戶能在自己的管理面板修改自己的信息之外，管理員可以通過該模塊的用戶編輯功能對用戶信息進(jìn)行修改。同時，可以通過搜索功能來定位特定用戶名的用戶，便于更快的找到需要操作的用戶。</p><p>　　管理后臺子模塊 — 圖片管理</p><p>　　圖片管

47、理用于管理當(dāng)前系統(tǒng)中已經(jīng)正常注冊并且使用本系統(tǒng)的圖片共享功能的用戶所上傳的圖片。</p><p>　　在該模塊中，后臺管理員可以根據(jù)單個用戶對該用戶所上傳的圖片進(jìn)行管理。管理用戶圖片的界面和用戶前臺的管理界面相同。另外，和用戶管理一樣，后臺管理員也可以通過搜索特定的用戶名來快速定位到某個用戶，并且對他所上傳的圖片進(jìn)行管理。</p><p>　　在用戶上傳圖片的過程中，有可能由于用戶的誤操作

48、導(dǎo)致用戶所上傳的圖片沒有分類或者沒有標(biāo)簽，這種情況下，管理員可以使用圖片清理功能將這些圖片清理掉。避免冗余以及錯誤數(shù)據(jù)導(dǎo)致的系統(tǒng)不穩(wěn)定或者統(tǒng)計數(shù)據(jù)出錯。</p><p><b>　　方案選擇</b></p><p><b>　　方案比較</b></p><p><b>　　系統(tǒng)模式比較</b><

49、/p><p>　　目前開發(fā)模式主要有C/S結(jié)構(gòu)和B/S結(jié)構(gòu)：</p><p>　　C/S結(jié)構(gòu)，即Client/Server(客戶機/服務(wù)器)結(jié)構(gòu)，是大家熟知的軟件系統(tǒng)體系結(jié)構(gòu)，通過將任務(wù)合理分配到Client端和Server端，降低了系統(tǒng)的通訊開銷，可以充分利用兩端硬件環(huán)境的優(yōu)勢。 </p><p>　　B/S結(jié)構(gòu)，即Browser/Server(瀏覽器/服務(wù)器)結(jié)構(gòu)，

50、是隨著Internet技術(shù)的興起，對C/S結(jié)構(gòu)的一種變化或者改進(jìn)的結(jié)構(gòu)。在這種結(jié)構(gòu)下，用戶界面完全通過WWW瀏覽器實現(xiàn)，一部分事務(wù)邏輯在前端實現(xiàn)，但是主要事務(wù)邏輯在服務(wù)器端實現(xiàn)。B/S結(jié)構(gòu)利用不斷成熟和普及的瀏覽器技術(shù)實現(xiàn)原來需要復(fù)雜專用軟件才能實現(xiàn)的強大功能，并節(jié)約了開發(fā)成本，是一種全新的軟件系統(tǒng)構(gòu)造技術(shù)。</p><p><b>　　程序語言比較</b></p><p

51、>　　目前流行的程序開發(fā)語言主要有ASP 和 JSP和PHP：</p><p>　　ASP全名Active Server Pages，是一個WEB服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和執(zhí)行動態(tài)的、互動的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語言VBScript（Java script）作為自己的開發(fā)語言。 </p><p>　　JSP是Sun公司推出的新一代網(wǎng)站開發(fā)語言，Java

52、 Server Page。JSP可以在Serverlet和JavaBean的支持下，完成功能強大的站點程序。 </p><p>　　PHP，即“PHP: Hypertext Preprocessor”，是一種被廣泛使用的開放源代碼多用途腳本語言，尤其適用于 web 開發(fā)并可以嵌入到 HTML 中去。</p><p>　　三者都提供在 HTML代碼中混合某種程序代碼、由語言引擎解釋執(zhí)行程序代

53、碼的能力。但JSP代碼被編譯成 Servlet并由Java虛擬機解釋執(zhí)行，這種編譯操作僅在對JSP頁面的第一次請求時發(fā)生。在PHP、ASP 、JSP環(huán)境下，HTML代碼主要負(fù)責(zé)描述信息的顯示樣式，而程序代碼則用來描述處理邏輯。普通的 HTML頁面只依賴于Web服務(wù)器，而PHP、ASP 、JSP頁面需要附加的語言引擎分析和執(zhí)行程序代碼。程序代碼的執(zhí)行結(jié)果被重新嵌入到HTML代碼中，然后一起發(fā)送給瀏覽器。PHP、ASP 、JSP兩者都是面向

54、Web服務(wù)器的技術(shù)，客戶端瀏覽器不需要任何附加的軟件支持。</p><p>　　然而，相較與ASP ， JSP，PHP有其便于部署，可快速開發(fā)并且使用靈活等特點。比較適合于做中小型系統(tǒng)的快速開發(fā)，同等相較于JSP，PHP由于沒有那么復(fù)雜的處理，所以在一定程度上執(zhí)行速度優(yōu)于JSP。</p><p><b>　　方案選擇</b></p><p>　

55、　綜上所述，本系統(tǒng)開發(fā)選擇方案如下：</p><p>　　本圖片共享系統(tǒng)采用PHP、JavaScript作為主要程序開發(fā)語言，采用smarttemplate + 獨立后臺管理模版的構(gòu)架， mysql數(shù)據(jù)庫。采用B/S結(jié)構(gòu)。系統(tǒng)界面美觀內(nèi)容豐富，很好的實現(xiàn)了與用戶的交互。</p><p><b>　　系統(tǒng)技術(shù)平臺</b></p><p>　　開發(fā)

56、環(huán)境：WindowsServer2003 Datacenter Edition SP1、MySql 4.2、Apache2；</p><p>　　開發(fā)工具：ZendStudio、 DreamweaverMX、PhotoShop、記事本；</p><p>　　系統(tǒng)構(gòu)架：PHP+Smarttemplate+JavaScript+MySql4.2；</p><p>　　開

57、發(fā)語言：PHP5。</p><p><b>　　開發(fā)環(huán)境搭建</b></p><p><b>　　配置PHP 5</b></p><p>　　將從網(wǎng)絡(luò)上下載下來的文件解包，然后需要以下操作：</p><p>　　打開php.ini文件，修改以下內(nèi)容：</p><p>　　ma

58、x_execution_time = 600;</p><p>　　max_input_time = 600;</p><p>　　memory_limit = 16M</p><p>　　post_max_size = 20M</p><p>　　file_uploads = On</p><p>　　upload_

59、max_filesize = 20M</p><p>　　default_socket_timeout = 60</p><p>　　以上選項避免由于用戶上傳過大的圖片導(dǎo)致PHP處理超時。</p><p>　　register_globals = Off</p><p>　　magic_quotes_gpc = On</p>&

60、lt;p>　　以上選項為防止用戶惡意提交。</p><p>　　extension_dir = "D:\PHP\PHP\ext"</p><p>　　以上選項用于設(shè)定PHP的擴展所在文件夾。</p><p>　　extension=php_mbstring.dll</p><p>　　該擴展用于支持長字符集</

61、p><p>　　extension=php_exif.dll</p><p>　　該擴展用于支持PHP讀取圖片的EXIF信息。</p><p>　　extension=php_gd2.dll</p><p>　　該擴展用于PHP對圖片的操作以及驗證碼的生成操作。</p><p>　　extension=php_mysql.

62、dll</p><p>　　extension=php_mysqli.dll以上兩項用于PHP對MYSQL的支持</p><p>　　extension=php_sockets.dll</p><p>　　該擴展用于PHP對SOCKET的支持，主要用于支持上傳時顯示上傳進(jìn)度的UPU庫</p><p>　　Apache 2.0</p>

63、;<p>　　將從網(wǎng)絡(luò)上下載下來的文件解包，然后需要以下操作：</p><p>　　修改Apache的配置文件:</p><p>　　進(jìn)入到解包根目錄下的conf目錄。打開httpd.conf文件，修改以下內(nèi)容：</p><p>　　設(shè)置執(zhí)行超時：Timeout 300</p><p>　　設(shè)置監(jiān)聽80端口：L

64、isten 80</p><p>　　開啟APACHE對PHP的支持：</p><p>　　LoadModule php5_module d:/php/php/php5apache2.dll</p><p>　　開啟URL重寫功能：LoadModule rewrite_module modules/mod_rewrite.so</p><p>

65、;　　設(shè)定WEB服務(wù)的根目錄：DocumentRoot "E:\web"</p><p>　　設(shè)置URL重寫所生效的范圍：<Directory /></p><p>　　Options FollowSymLinks</p><p>　　AllowOverride ALL</p><p>　　</D

66、irectory></p><p><b>　　設(shè)置中文支持：</b></p><p>　　AddLanguage zh-CN .zh-cn</p><p>　　AddLanguage zh-TW .zh-tw</p><p>　　AddLanguage zh-cn .cn</p><p>

67、<b>　　設(shè)置默認(rèn)語言</b></p><p>　　AddDefaultCharset GB2312</p><p><b>　　設(shè)置默認(rèn)索引頁：</b></p><p>　　DirectoryIndex index.html index.html.var index.htm index.php</p>&

68、lt;p>　　設(shè)置APACHE對PHP文件進(jìn)行解析：</p><p>　　AddType application/x-httpd-php .php</p><p>　　將APACHE安裝為服務(wù)：</p><p>　　進(jìn)入命令行，轉(zhuǎn)到APACHE文件夾下的BIN文件夾，執(zhí)行以下命令：</p><p>　　apache -k install

69、</p><p>　　啟動APACHE服務(wù)器</p><p><b>　　執(zhí)行以下命令：</b></p><p>　　net start apache2</p><p><b>　　mysql安裝</b></p><p>　　將從網(wǎng)上下載的MYSQL解包,然后修改其配置文件如

70、下:</p><p>　　default-character-set=utf8//由于整個系統(tǒng)均使用UTF-8,故數(shù)據(jù)庫也統(tǒng)一文字編碼</p><p>　　key_buffer_size=20M</p><p>　　max_allowed_packet=15M//以上設(shè)置用于處理將圖片存入數(shù)據(jù)庫的大量信息數(shù)據(jù)。</p><p>　　運

71、行MySQLInstanceConfig.exe對MYSQL進(jìn)行初始化設(shè)置。</p><p><b>　　安裝MYSQL服務(wù)</b></p><p>　　執(zhí)行mysqld-nt.exe –install將MYSQL進(jìn)程作為系統(tǒng)服務(wù)運行。</p><p>　　使用MYSQLADMIN對MYSQL的管理員進(jìn)行管理</p><p

72、>　　PHPMYADMIN配置</p><p>　　找到phpmysdmin的配置文件，修改以下地方。</p><p>　　$cfg['Servers'][$i]['host'] = 'localhost';//設(shè)置為本機（只做調(diào)試用）</p><p>　　$cfg['Servers&#

73、39;][$i]['port'] = '3306';//MySQL的端口</p><p>　　$cfg['Servers'][$i]['connect_type'] = 'tcp';//設(shè)置與MySQL連接的方式 </p><p>　　$cfg['Servers'][$i][

74、'compress'] = FALSE;//使用壓縮協(xié)議進(jìn)行傳輸 </p><p>　　$cfg['Servers'][$i]['auth_type'] = 'config';//如果PHP安裝模式為Apache，可以使用http和cookie；如果PHP安裝模式為CGI，可以使用cookie；默認(rèn)為config</p>

75、<p>　　$cfg['Servers'][$i]['user'] = 'root';//MySQL連接用戶</p><p>　　$cfg['Servers'][$i]['password'] = '';//MySQL連接密碼</p><p><b&

76、gt;　　實現(xiàn)技術(shù)與數(shù)據(jù)結(jié)構(gòu)</b></p><p><b>　　系統(tǒng)架構(gòu)設(shè)計</b></p><p><b>　　網(wǎng)絡(luò)架構(gòu)</b></p><p>　　整個網(wǎng)絡(luò)架構(gòu)體系如下圖：</p><p>　　圖5-1 圖片共享系統(tǒng)網(wǎng)絡(luò)構(gòu)架圖</p><p><b&g

77、t;　　系統(tǒng)邏輯服務(wù)器</b></p><p>　　在邏輯上可以將使用的服務(wù)器分為三類，每類服務(wù)器均有不同的功能：</p><p>　　Web服務(wù)器：該服務(wù)器進(jìn)行Web發(fā)布，提供用于普通用戶業(yè)務(wù)工作的操作界面（網(wǎng)頁），亦將用戶的操作參數(shù)通過處理后生成的數(shù)據(jù)庫查詢傳遞回數(shù)據(jù)庫服務(wù)器，同時亦將結(jié)果在經(jīng)過解析以及重新編碼后生成的數(shù)據(jù)通過網(wǎng)頁的方式返回到用戶前端。同時，該WEB服務(wù)器還

78、負(fù)責(zé)解析用戶的請求以及動態(tài)的生成用戶所能看見的Web頁面。</p><p>　　數(shù)據(jù)庫服務(wù)器：該服務(wù)器上安裝了MySQL數(shù)據(jù)庫系統(tǒng)，數(shù)據(jù)庫系統(tǒng)的設(shè)計主要針對該服務(wù)器。在此存放著所有的原始數(shù)據(jù)及用于系統(tǒng)的其它結(jié)構(gòu)數(shù)據(jù)，所有的用戶及管理者對信息的新增，修改，刪除最終都將反映在該服務(wù)器上。同時，該服務(wù)器需要處理通過WEB服務(wù)器傳輸來的查詢請求，并將查詢結(jié)果返回給應(yīng)用服務(wù)器。</p><p>&l

79、t;b>　　系統(tǒng)處理流程</b></p><p>　　本系統(tǒng)采用B/S模式,Smartemplate構(gòu)架，用戶使用本系統(tǒng)時，只需要安裝上網(wǎng)的瀏覽器即可，不需要安裝其它任何軟件。系統(tǒng)處理流程如下圖所示：</p><p>　　圖5-2系統(tǒng)處理流程</p><p>　　基于MVC的Smartemplate架構(gòu)</p><p>　　

80、本系統(tǒng)采用基于MVC的構(gòu)架實現(xiàn)。模型由實現(xiàn)業(yè)務(wù)邏輯的PHP解析腳本構(gòu)成，控制器由SmartTemplate來實現(xiàn)，視圖由一組含有SmartTemplate格式標(biāo)簽的HTML文件構(gòu)成。下圖簡要描述了工作流程。</p><p>　　圖5-3響應(yīng)用戶請求的工作流程</p><p>　　MVC是一種設(shè)計模式，它強制性的把應(yīng)用程序的輸入、處理和輸出分開。MVC把應(yīng)用程序分成三個核心模塊：模型、視圖和

81、控制器，它們之間的相互關(guān)系如下圖所示：</p><p>　　圖5-4 MVC設(shè)計模式</p><p>　　SmartTemplate技術(shù)概述</p><p>　　在這個系統(tǒng)制作過程中，大量采用了SmartTemplate技術(shù)，現(xiàn)就自己對SmartTemplate技術(shù)的理解表述如下：</p><p>　　SmartTemplate是一個支持大型

82、WEB應(yīng)用程序的模板引擎，是由服務(wù)器端調(diào)用和執(zhí)行的PHP庫。SmartTemplate本身與協(xié)議無關(guān)。 </p><p>　　要理解SmartTemplate，首先需要理解模板引擎的工作方式。</p><p>　　普通模板引擎工作方式: 你的PHP腳本指定一個HTML模板，指定動態(tài)內(nèi)容并顯示。模板分析器使用指派的內(nèi)容替換模板內(nèi)所有的占位符，然后顯示給用戶。</p><p

83、>　　SmartTemplate 的工作方式類似模板編譯，他把模板轉(zhuǎn)換為可執(zhí)行的PHP腳本，并且保存起來以備以后重用。當(dāng)一個新的模板在第一次被使用時，模板內(nèi)所有的占位符被替換為簡單的可輸出指定內(nèi)容的PHP代碼元素。舉個例子，模板片斷 <H3>{TITLE}</H3>，將被轉(zhuǎn)換為 <H3><?php echo $TITLE; ?></H3>. 如果你指定內(nèi)容給正確的變量,

84、將再也不需要進(jìn)行模板分析了. 程序要做的僅僅是自己包含并執(zhí)行編譯后的模板. 這種緩存方式能大大減少模板引擎的運行時間。</p><p>　　SmartTemplate與html模版之間的關(guān)系</p><p>　　為了增強系統(tǒng)的移植性，使系統(tǒng)能在Windows 、NT、UNIX及Linux環(huán)境下運行而不進(jìn)行源代碼的修改，采用PHP技術(shù)。開發(fā)基于WEB的軟件系統(tǒng)，采用PHP腳本 工具，用PHP

85、的動態(tài)庫連接訪問數(shù)據(jù)庫，將一些對象的屬性和方法封裝在PHP類庫中，客戶端界面可用HTML與JavaScript配合完成，服務(wù)器端的應(yīng)用處理可用PHP腳本＋SmartTemplate引擎來具體實現(xiàn)。</p><p>　　html模版主要用來定義最終的表現(xiàn)頁面，而PHP腳本主要用來完成大量的邏輯處理，SmartTemplate用于將處理后的數(shù)據(jù)動態(tài)的封裝到html模版中，最終顯示的頁面有PHP解析后發(fā)送到客戶端。也就

86、是說，經(jīng)過封裝以及解析的html模版主要用來發(fā)送給前端的用戶，而PHP腳本主要來響應(yīng)用戶的請求，完成請求的邏輯處理,同時，充當(dāng)著控制者的角色，用來負(fù)責(zé)響應(yīng)的事務(wù)處理。</p><p>　　SmartTemplate本身沒有任何的業(yè)務(wù)處理邏輯，它只是簡單地檢索PHP腳本定義的對象，再將動態(tài)的內(nèi)容插入到預(yù)定義的html模版中。</p><p>　　PHP腳本創(chuàng)建SmartTemplate需要的

87、變量和對象，再根據(jù)用戶的行為，決定處理哪個html模版并發(fā)送給用戶。</p><p>　　在實際開發(fā)過程中，往往是先把html模版開發(fā)出來，然后再將html模版中需要動態(tài)生成的部分用SmartTemplate預(yù)定義的標(biāo)簽代替。這樣做的好處是充分利用了HTML的頁面表現(xiàn)能力，避免了PHP腳本在頁面表現(xiàn)方面的不足，大大縮短了開發(fā)周期，各盡所能。</p><p>　　以下是節(jié)選程序代碼中的HTM

88、L模版轉(zhuǎn)換為最終的頁面對象：</p><p>　　首先，用HTML編輯工具開發(fā)出HTML頁面</p><p>　　… …. …. ….</p><p>　　<form action="search.php" id="find_photo" method="post"></p>&l

89、t;p>　　<div align="left"></p><p>　　搜索圖片:&nbsp;<input type="text" name="key" size="24" /></p><p>　　<input id="findbutton" ty

90、pe="submit" name="find_photo" value="搜索" /></p><p><b>　　</div></b></p><p><b>　　</form></b></p><p>　　<!--this

91、is the content of the slidshow--></p><p>　　<!-- do not modify the id of the father of dojoslidshow---></p><p>　　{flash_slideshow}</p><p><b>　　</div></b>&l

92、t;/p><p>　　<!--agl:cssobject id="indexphotolist" type="Three Columns" /--></p><p>　　<!-- BEGIN img_thb_block --></p><p>　　<div class="threecolbo

93、x_indexphotolist"></p><p>　　<a href="{org_link}" class="thickbox" rel="gallery-plants"></p><p>　　<img src="{link}" alt="" width

94、="70" height="70" border="0" /></p><p><b>　　</a></b></p><p><b>　　</div></b></p><p>　　<!-- END img_thb_block -

95、-></p><p><b>　　…. …. ….</b></p><p>　　通過PHP解析將對應(yīng)內(nèi)容填充到HTML模版內(nèi)</p><p>　　… …. …. ….</p><p><b>　　<?php</b></p><p>　　if (!empty($_o

96、bj['img_thb_block'])){</p><p>　　if (!is_array($_obj['img_thb_block']))</p><p>　　$_obj['img_thb_block']=array(array('img_thb_block'=>$_obj['img_thb_block

97、9;]));</p><p>　　$_tmp_arr_keys=array_keys($_obj['img_thb_block']);</p><p>　　if ($_tmp_arr_keys[0]!='0')</p><p>　　$_obj['img_thb_block']=array(0=>$_obj[

98、9;img_thb_block']);</p><p>　　$_stack[$_stack_cnt++]=$_obj;</p><p>　　foreach ($_obj['img_thb_block'] as $rowcnt=>$img_thb_block) {</p><p>　　$img_thb_block['ROWCNT&

99、#39;]=$rowcnt;</p><p>　　$img_thb_block['ALTROW']=$rowcnt%2;</p><p>　　$img_thb_block['ROWBIT']=$rowcnt%2;</p><p>　　$_obj=&$img_thb_block;</p><p><

100、b>　　?></b></p><p>　　<div class="threecolbox_indexphotolist"></p><p><b>　　<a href="</b></p><p><b>　　<?php</b></p>

101、<p>　　echo $_obj['org_link'];</p><p><b>　　?></b></p><p>　　" class="thickbox" rel="gallery-plants"><img src="</p><p>

102、;<b>　　<?php</b></p><p>　　echo $_obj['link'];</p><p><b>　　?></b></p><p>　　" alt="" width="70" height="70" bor

103、der="0" /></a></p><p><b>　　</div></b></p><p><b>　　…. …. ….</b></p><p><b>　　數(shù)據(jù)庫設(shè)計</b></p><p>　　圖5-5 圖片共享系統(tǒng)數(shù)據(jù)

104、庫設(shè)計結(jié)構(gòu)圖</p><p>　　上圖是根據(jù)需求設(shè)計出十二個數(shù)據(jù)表，分別是：系統(tǒng)設(shè)定表（setting），管理員操作記錄表（adminlog）,管理員信息表（admin_info），圖片緩存記錄表（hash_cache），縮略圖表（photothumbs），圖片表（photo），用戶組表(group_setting)，用戶信息表（member_info），用戶登陸記錄表(loginlog)，圖片分類表（sort_

105、setting），用戶上傳相冊表（job）以及標(biāo)簽表（tags_setting）。</p><p>　　該表主要分為以下幾個部分：</p><p><b>　　管理員相關(guān)表：</b></p><p>　　圖5-6 管理員相關(guān)表</p><p><b>　　系統(tǒng)設(shè)置表：</b></p>

106、<p>　　圖5-7 系統(tǒng)設(shè)置表</p><p><b>　　用戶組設(shè)置表</b></p><p>　　圖5-8 用戶組設(shè)置表</p><p><b>　　圖片信息表</b></p><p>　　圖5-9 圖片信息表</p><p><b>　　相冊以及標(biāo)

107、簽分類表</b></p><p>　　圖5-10 相冊分類以及標(biāo)簽表</p><p>　　前臺用戶主要數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計</p><p>　　用戶上傳相冊表（job）用于存儲用戶上傳某批圖片的基礎(chǔ)信息</p><p>　　表5-1 job 表</p><p>　　用戶信息表（member_info）用于圖片上

108、傳用戶的詳細(xì)情況信息——與圖片表是一對多的關(guān)系：</p><p>　　表5-2 member_info表</p><p>　　管理后臺數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計</p><p>　　系統(tǒng)設(shè)定表（setting）用于存儲系統(tǒng)基本設(shè)定信息</p><p>　　表5-3 setting 表</p><p>　　管理員操作記錄表（adm

109、inlog），用于存儲管理員對后臺的操作記錄</p><p>　　表5-4 adminlog 表</p><p>　　管理員信息表（admin_info），用于存儲管理員的基本信息（為了降低系統(tǒng)復(fù)雜度，這里將管理員的權(quán)限直接和管理員信息寫入同一表中，不獨立分為兩個表）</p><p>　　表5-5 admin_info 表</p><p>&

110、lt;b>　　特殊問題解決辦法</b></p><p>　　本系統(tǒng)在設(shè)計和開發(fā)過程中，也遇到了不少的問題，就其中較特殊問題分析及解決方案描述如下：</p><p>　　商業(yè)源代碼，全套計算機畢業(yè)設(shè)計免費下載 http://www.ibaidusoft.com</p><p>　　更多全套設(shè)計聯(lián)系QQ:1042897696</p>&l

111、t;p>　　最新設(shè)計大全 http://www.bylw168.com/sf/20100915/3539.html</p><p><b>　　亂碼問題</b></p><p>　　在做設(shè)計的時候，遇到了亂碼問題。在頁面間傳遞時漢字會亂碼，如果直接從數(shù)據(jù)庫添加數(shù)據(jù)顯示沒有亂碼，但是從后臺管理添加數(shù)據(jù)就會在添加成功后的顯示頁面出現(xiàn)在亂碼。對于這個問題，原因是開發(fā)平

112、臺在WINDOWS下，WINDOWS默認(rèn)的編碼格式是GB2312，但是運行環(huán)境卻是UTF-8環(huán)境，要避免亂碼，必須統(tǒng)一整個開發(fā)環(huán)境的字符編碼：</p><p>　　首先，統(tǒng)一在數(shù)據(jù)庫中的編碼：</p><p>　　在創(chuàng)建數(shù)據(jù)庫以及查詢數(shù)據(jù)庫時，將編碼首先置為UTF-8</p><p>　　SET CHARACTER_SET_CLIENT = utf8,</p&

113、gt;<p>　　CHARACTER_SET_CONNECTION = utf8,</p><p>　　CHARACTER_SET_DATABASE = utf8,</p><p>　　CHARACTER_SET_RESULTS = utf8,</p><p>　　CHARACTER_SET_SERVER = utf8,</p><

114、p>　　COLLATION_CONNECTION = utf8_general_ci,</p><p>　　COLLATION_DATABASE = utf8_general_ci,</p><p>　　COLLATION_SERVER = utf8_general_ci,</p><p>　　AUTOCOMMIT=1";</p>&l

115、t;p>　　在HTML模版的HEADER部分注明編碼標(biāo)準(zhǔn)：</p><p>　　<meta http-equiv="content-type" content="text/html;charset=utf-8" /></p><p>　　在PHP輸出前在HEADER內(nèi)容中申明所用的字符流編碼：</p><p>

116、;　　header('Content-Type: text/html; charset=utf-8');</p><p><b>　　動態(tài)顯示上傳進(jìn)度</b></p><p>　　通過表單上傳有一個缺陷，就是不能動態(tài)的顯示當(dāng)前文件上傳了多少。這樣在用戶上傳比較大的圖片時很不方便用戶判斷上傳所耗時間以及瀏覽器是否超時。解決方法：經(jīng)過查找，發(fā)現(xiàn)一個通過JA

117、VASCRIPT以及PHP的SOCKET庫動態(tài)生成上傳進(jìn)度的PHP庫：UGiA PHP UPLOADER。該庫的使用方法很簡單，下面具體說明其調(diào)用方法：</p><p><b>　　調(diào)用方法：</b></p><p>　　1.對于upu/misc/upu.js, 修改var basePath = "/upload/upu/"; 為upu相對于網(wǎng)站

118、根目錄的路徑</p><p>　　2.然后在包含上傳表單的頁面中加入</p><p>　　<script type="text/javascript" src="upu/misc/upu.js"></script>,這里的</p><p>　　upu/misc/upu.js為upu.js的路徑，然后在&

119、lt;form>標(biāo)簽中加入</p><p>　　onsubmit="return upuInit(this)"</p><p>　　3.在你文件上傳后處理的頁面中使用$_POST來獲取表單數(shù)據(jù)</p><p>　　4. upu/temp為上傳臨時文件存放目錄, upu/files為文件存放目錄,這兩個目錄可以在upu.class.php中指

120、定。</p><p>　　5. <form>中要有enctype="multipart/form-data"這個屬性，action為文件上傳成功后的處理頁面，也就是說你的<form>完全按照正常的思路來寫就可以了，唯一不同的是需要加入onsubmit="return upuInit(this)"</p><p>　　6. 上傳

121、成功后，可以使用$_POST來獲取表單數(shù)據(jù)，如果是普通表單，直接</p><p>　　$_POST['表單名稱']即可獲得其值，如果是一個文件，則返回這樣一個數(shù)組</p><p>　　$_POST['表單名字'] = Array (</p><p>　　[filename] => </p><p>　　[

122、clientpath] => </p><p>　　[savepath] => </p><p>　　[filetype] => </p><p>　　[filesize] => </p><p>　　[extension] => </p><p><b>　　)</b&g