第三個(gè)資料庫網(wǎng)站實(shí)例-個(gè)人網(wǎng)路相簿

1、Chapter 15第三個(gè)資料庫網(wǎng)站實(shí)例-個(gè)人網(wǎng)路相簿本章將介紹如何在網(wǎng)站上提供上傳與下載檔案的功能，並以一個(gè)小而美的個(gè)人網(wǎng)路相簿做為應(yīng)用。既然是網(wǎng)路相簿，那麼應(yīng)該只能接受上傳的檔案是圖檔，在上傳檔案的地方做檔案類型的檢查，避免使用者上傳非圖檔的檔案。為了方便在網(wǎng)頁上一次瀏覽相簿裡的許多照片，會介紹如何寫出自動(dòng)產(chǎn)生縮圖的功能，以及M 列 * N 行的資料呈現(xiàn)方式 。最後再介紹刪除已上傳到網(wǎng)站的檔案，以及從網(wǎng)站下載檔案到自己的電腦中。開始離開教科書投影片同教科書受著作權(quán)保護(hù)，僅供教師作為授課用途。學(xué)校教師得使用投影片，於授課期間，搭配用書進(jìn)行教學(xué)；由於投影片極易重製、列印、出版，為避免第三人（含

2、學(xué)生）因不知情而發(fā)生侵權(quán)行為，請支持與協(xié)助不將教學(xué)投影片以任何型式移轉(zhuǎn)予第三人使用。如有特殊需求，請向出版社申請授權(quán)協(xié)議。 目錄15-1準(zhǔn)備工作15-2上傳檔案 15-3建立縮圖 15-4瀏覽相簿 15-5檢視照片原圖 15-6下載檔案 15-7刪除已上傳檔案回章首離開下一頁上一頁15-1 準(zhǔn)備工作回目錄下一頁上一頁下一節(jié)先在腦海裡整理一下這個(gè)網(wǎng)路相簿，應(yīng)該要有哪些網(wǎng)頁。首先，必須有上傳檔案到網(wǎng)站的功能。再來要有一個(gè)可以顯示目前已上傳到網(wǎng)站的所有影像圖檔清單的網(wǎng)頁。在這個(gè)網(wǎng)頁上，可以讓使用者下載某個(gè)檔案，也可以點(diǎn)選檢視某個(gè)圖檔的原始大小。這樣就可以大致規(guī)劃出網(wǎng)站的架構(gòu)出來了。15-1-1 定義

3、網(wǎng)站架構(gòu)要從使用者的電腦上傳檔案到網(wǎng)站上，要透過上傳檔案的網(wǎng)頁，以便從 Client 端指定要上傳的檔案路徑與檔名：回目錄下一頁上一頁下一節(jié)15-1-1 定義網(wǎng)站架構(gòu)網(wǎng)站的首頁可以列出目前網(wǎng)站上所有的已上傳檔案清單的網(wǎng)頁，包括檔案型態(tài)、檔案大小，以及描述說明。從這個(gè)相簿首頁，使用者可以檢視某個(gè)照片的原始圖檔，以及下載原始圖檔與刪除照片?；啬夸浵乱豁撋弦豁撓乱还?jié)15-1-1 定義網(wǎng)站架構(gòu)從使用者的電腦上傳檔案到網(wǎng)站上，要透過上傳檔案的網(wǎng)頁，以便從 Client 端指定要上傳的檔案路徑與檔名：複製光碟目錄：Examplechap14bikeInitial將以C:AppServwwwalbum做為“

4、我們以前小時(shí)候”的相簿網(wǎng)站主目錄。回目錄下一頁上一頁下一節(jié)15-1-1 定義網(wǎng)站架構(gòu)定義網(wǎng)站時(shí)的設(shè)定如下：回目錄下一頁上一頁下一節(jié)15-1-1 定義網(wǎng)站架構(gòu)Dreamweaver 中的網(wǎng)站定義設(shè)定畫面如下：回目錄下一頁上一頁下一節(jié)15-1-2 準(zhǔn)備資料庫內(nèi)容想想這個(gè)網(wǎng)路相簿需要哪些資料表格。它只需要儲存目前上傳至網(wǎng)站的所有檔案的清單，包括它的原始檔名、放在網(wǎng)站的路徑與檔案、縮圖的路徑與檔案、檔案大小、描述文字等資訊。一旦有傳案上傳至網(wǎng)站，就在這表格插入一筆記錄以便存放該檔案的資訊；若刪除檔案，也要同步將該檔案的資料從資料表格中刪除。將這個(gè)資料表格也取名為：album。當(dāng)您從本書光碟下的：Exa

5、mplechap15albumImportDataalbum.SQL 匯入資料庫，“album”表格的欄位定義如下：回目錄下一頁上一頁下一節(jié)15-1-3 建立 MySQL 資料庫連線為這個(gè)網(wǎng)站設(shè)定資料庫連線如下：回目錄下一頁上一頁下一節(jié)15-2 上傳檔案用 PHP來製作處理上傳檔案的網(wǎng)頁，只要編寫幾行程式碼就完成了。尤其我們是用 Dreamweaver 來設(shè)計(jì)所需要的元件，要寫的程式碼更少。過，在這裡要先說明 PHP 上傳檔案的機(jī)制，以便者了解上傳檔案背後的過程。回目錄下一頁上一頁下一節(jié)15-2-1 上傳檔案的流程利用 PHP 來上傳檔案，主要可從兩個(gè)角度來看，一是上傳檔案的使用者 Clien

6、t 端，一是網(wǎng)站的 Server 端。 Client使用者要先從網(wǎng)頁上選取要上傳的檔案，然後執(zhí)行上傳功能。事實(shí)上檔案是只有傳至網(wǎng)站中的暫存目錄。暫存目錄是定義在 php.ini 中的 upload_tmp_dir 參數(shù)中所指定。檔案複製到網(wǎng)站的暫存目錄時(shí)，系統(tǒng)會自動(dòng)以亂數(shù)產(chǎn)生暫存檔的檔名儲存在這暫存目錄下，通常產(chǎn)生的暫存檔案是用“php+亂數(shù).tmp”的檔名格式來命名。 Server在上傳檔案的網(wǎng)頁程式結(jié)束之前，必須從暫存目錄下將它複製或搬移到網(wǎng)站中指定的目錄下。複製或搬移的同時(shí)，也可以利用這個(gè)機(jī)會將檔案正名回來，改回原先從使用者端上傳時(shí)的原始檔名?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-1 上傳檔

7、案的流程暫存目錄最後目錄回目錄下一頁上一頁下一節(jié)15-2-2 上傳檔案的相關(guān)設(shè)定回目錄下一頁上一頁在 php.ini 設(shè)定檔中有些設(shè)定與上傳檔案的功能相關(guān)，將它們整理如下表：通常在設(shè)定上傳檔案的大小限制時(shí)，要依照 memory_limit post_max_size upload_max_size 的原則。在每個(gè)上傳檔案的網(wǎng)頁裡，會再以 max_file_size 做為上傳檔案的限制。即使在網(wǎng)頁中將 max_file_size 的限制放寬了，若設(shè)到超過上面表格中參數(shù)的限制，到最後仍會被在 php.ini 設(shè)的限制給卡住?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-3 設(shè)計(jì)上傳檔案的網(wǎng)頁首先先製作一個(gè)可以

8、讓使用者選取要上傳檔案的網(wǎng)頁。Step1:開啟“”網(wǎng)頁。這個(gè)網(wǎng)頁裡有一個(gè)表單，表單裡有一個(gè)隱藏欄位、一個(gè)檔案（File）欄位，及供使用者輸入相片註解的文字欄位， 和表單按鈕。Step2:注意隱藏欄位的名稱要取名為：MAX_FILE_SIZE，而且要將它放在表單裡的第一個(gè)元件位置。這裡所設(shè)的“值”代表上傳檔案的大小限制，其中檔案大小的單位是位元組（Byte）。待會這個(gè)限制會被加到表單中一起送出。檔案欄位回目錄下一頁上一頁下一節(jié)15-2-3 設(shè)計(jì)上傳檔案的網(wǎng)頁Step3:選取整個(gè)表單，方法欄位用預(yù)設(shè)的：POST，而動(dòng)作欄位則將它設(shè)為待會要將表單用 POST 方法傳遞過去的網(wǎng)頁名稱：。這個(gè)網(wǎng)頁只有這

9、個(gè)地方要請讀者自行修改，其它都已幫你設(shè)好了?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-3 設(shè)計(jì)上傳檔案的網(wǎng)頁切換到程式碼模式，來看一下產(chǎn)生的程式碼：關(guān)於表單的屬性部份： action=add.php“檔案上傳後，表單的內(nèi)容要傳遞給“add.php”網(wǎng)頁。 method=post“表單的內(nèi)容要用 POST 的方式傳遞到指定的網(wǎng)頁。回目錄下一頁上一頁下一節(jié)15-2-3 設(shè)計(jì)上傳檔案的網(wǎng)頁enctype=multipart/form-data“可以讓使用者傳各式型態(tài)的檔案。至於檔案欄位的部份： name=uploadfile“傳遞的檔案欄位名稱是“uploadfile”。待會接收它的“add.php”網(wǎng)頁會

10、以“uploadfile”做為變數(shù)名稱來顯示上傳檔案的檔名、暫存檔名、大小、檔案型態(tài)等屬性。如果現(xiàn)在執(zhí)行這個(gè)網(wǎng)頁，在沒問題的情況下，檔案就會上傳到網(wǎng)站的暫存目錄中。至於不成功的原因，不外乎是還沒選取要上傳的檔案就上傳，或是選取的上傳檔案大小超過設(shè)定的檔案大小限制。回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置現(xiàn)在就來做可以顯示剛才從“upload.php” 網(wǎng)頁上傳檔案的相關(guān)資訊，接著再將上傳到網(wǎng)站的暫存檔案移到最後要存放的網(wǎng)站目錄下。Step1:開啟“”網(wǎng)頁。這個(gè)網(wǎng)頁裡有一個(gè)表格。待會要，將每個(gè)欄位顯示的值都用程式碼來完成?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-4 複製暫存檔案到指

11、定位置Step2:先將插入點(diǎn)移到“檔案名稱”後的欄位中，再切換到程式碼模式。將 （代表空白字元）的地方改為下列程式碼： 其中 $_FILESuploadfilename 的寫法目的是在取得“uploadfile”這個(gè)傳過來的檔案變數(shù)的原始檔案名稱的屬性。“uploadfile”是在前面所完成的“”網(wǎng)頁中的檔案欄位元件名稱。切換到程式碼模式回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置Step3:把其它幾個(gè)資料欄位的位置也分別改用下列對應(yīng)的程式碼取代：Step4:至於“註解”的部份，因?yàn)樗膬?nèi)容是從“”網(wǎng)頁透過POST 方法將表單裡的 comment 文字欄位傳過來的，所以要用 $

12、_POSTcomment 的寫法來取得註解欄位的值。切到程式碼模式，將註解欄位後的 改成：回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置Step5:至於“錯(cuò)誤代碼”的部份，其實(shí)也可以直接輸入 即可。不過錯(cuò)誤訊息的顯示和上傳成功的後續(xù)處理都會寫在這裡，請先參考以下畫面，在錯(cuò)誤代碼欄位的位置輸入下列程式碼：回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置$_FILESuploadfileerror 就是上傳檔案時(shí)的錯(cuò)誤碼，如果它的值是 0，代表上傳成功，也就是檔案已經(jīng)傳到網(wǎng)站的暫存目錄了，可以接著進(jìn)行將暫存檔案搬到最後儲存目錄的後續(xù)動(dòng)作。這裡我們將所有處理上傳成功後續(xù)動(dòng)作

13、的相關(guān)程式碼一起寫在當(dāng)錯(cuò)誤代碼是 0 的地方?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-4 複製暫存檔案到指定位置其中的第一大段程式碼，是在判斷從使用者端將檔案上傳至網(wǎng)站的暫存目錄的過程有沒有錯(cuò)誤。若錯(cuò)誤代碼是0，才表示成功；若大於0，則表示有問題，不同的代碼分別代表不同意義。 die 敘述和 exit 有點(diǎn)類似，是指跳離程式，小括號內(nèi)的參數(shù)表示要離開程式前要先印出的訊息文字。回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置至於第二大段程式碼，則是在將暫存檔案搬到最後存放這檔案的目標(biāo)目錄底下。先用 is_uploaded_file函數(shù)來判斷小刮號中的暫存檔案是否有成功的上傳到網(wǎng)站。回目錄下

14、一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置為了取得上傳檔案原本在使用者端的檔案名稱，特別用 $originalfilename 變數(shù)來取得$_FILESuploadfilename 的值。move_uploaded_file 函數(shù)的作用是將第一個(gè)參數(shù)指定的上傳的檔案搬移至第二個(gè)參數(shù)指定的目錄及檔名，若執(zhí)行成功則回傳true，失敗則回傳false。為了怕使用者用相同檔名的檔案前後上傳到網(wǎng)站，會造成之前的檔案內(nèi)容被覆蓋掉，所以特地在原始檔名前加上 date(“YmdHis”)，讓檔案前面有到時(shí)分秒的時(shí)間以避免檔名重覆的問題。回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置St

15、ep6:相信您現(xiàn)在一定很想趕快來試試這個(gè)上傳檔案的功能究竟能不能 “work”了吧!先來做個(gè)錯(cuò)誤示範(fàn)。首先回到“”，瀏覽這個(gè)網(wǎng)頁畫面。按下瀏覽鈕：選擇上傳的檔案，再按開啟舊檔鈕：回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置按下送出鈕。出現(xiàn)下面這個(gè)畫面裡怎麼有錯(cuò)誤訊息“目錄不存在或無法寫入”。原來是因?yàn)槲覀円獙捍鏅n案搬到目的目錄 $DestDir =“files” 底下，但是我們還沒有先建立好“files”這個(gè)子目錄呢。有錯(cuò)誤訊息回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置所以，要先回 Dreamweaver 建立“files”子目錄。在檔案面板中，選取網(wǎng)站的主

16、目錄位置，按滑鼠右鍵，在選單中選新增資料夾。將新資料夾命名為“files”：回目錄下一頁上一頁下一節(jié)15-2-4 複製暫存檔案到指定位置再重新瀏覽“”，重新操作一次前述上傳檔案的步驟。這次檔案可以成功上傳了。這次成功了回目錄下一頁上一頁按下檔案面板的重新整理鈕 ，點(diǎn)開“files”資料夾，可以看到“”檔案。下一節(jié)15-2-5 新增記錄到資料表格在將檔案上傳至網(wǎng)站後，還要將有關(guān)這次上傳檔案的相關(guān)資訊，包括原始檔名、在伺服器上的路徑與檔名、檔案大小與格式等資料，也都要寫到資料庫表格“album”中，這樣網(wǎng)站上的檔案與資料庫的內(nèi)容才會同步。Step1:開啟“”，再切換到程式碼模式。將原先顯示檔案上傳

17、成功的地方，改為以下用大括號括起來的一點(diǎn)程式碼。回目錄下一頁上一頁下一節(jié)15-2-5 新增記錄到資料表格將前兩章的實(shí)例中的程式碼中，有關(guān)執(zhí)行 SQL指令的部份拿來做修改。因?yàn)檫@段程式碼最後要用 mysql_select_db 去執(zhí)行 SQL語法，要用到資料庫連結(jié)，所以才要加入下列 require_once敘述來包含定義這個(gè)網(wǎng)站資料庫連結(jié)的程式檔“”：require_once(Connections/dbconn_album.php);至於 SQL 語法中的表格名稱、欄位名稱、資料庫連線名稱等，也都做了修改?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-5 新增記錄到資料表格Step2:剛才所加的程式碼了，

18、用到了許多次的GetSQLValueString 函數(shù)。GetSQLValueString 函數(shù)並不是 PHP 的函數(shù)，而是自定函數(shù)。只要是在之前練習(xí)中有用到插入記錄伺服器行為的網(wǎng)頁上，都可以在程式碼最開頭地方找得到這段定義GetSQLValueString 函數(shù)的程式碼。您可以回前一章的“”以下這段程式碼：回目錄下一頁上一頁下一節(jié)15-2-5 新增記錄到資料表格將以上程式碼貼到“”中，建議貼到比較前的位置，以免與後面的程式碼擠在一起使得版面太亂不易閱讀?；啬夸浵乱豁撋弦豁?5-2-5 新增記錄到資料表格將程式碼貼上回目錄下一頁上一頁下一節(jié)15-2-5 新增記錄到資料表格Step3:重新再做一

19、次上傳檔案的步驟，完成後將同樣出現(xiàn)上傳的結(jié)果報(bào)告。只要檔案上傳成功，就可以在資料表格中看到有一筆新的記錄加到表格中重新上傳檔案資料已加到表格中回目錄下一頁上一頁下一節(jié)15-2-5 新增記錄到資料表格這時(shí)重新整理檔案面板上的files資料夾，可以看到多了第二個(gè)上傳檔案。不過，因?yàn)樵谇耙恍」?jié)所上傳的檔案資料沒有被加到“album”表格中，之後無法從資料庫找到它。為了資料同步起見，讀者可以將前一小節(jié)上傳的檔案手動(dòng)刪除掉。多了一個(gè)上傳檔案回目錄下一頁上一頁下一節(jié)15-2-6 檔案格式判斷由於這個(gè)網(wǎng)站主要是做為網(wǎng)路相簿，所以照理來說上傳的檔案應(yīng)該都是圖檔才對。為了避免使用者上傳不是圖檔的檔案，要對上傳檔

20、案的檔案類型做些檢查，防堵掉不是圖檔的檔案。PHP 有個(gè) getimagesize 函數(shù)可以判斷一個(gè)檔案是不是圖檔。若給定的檔案是個(gè)圖檔，它會回傳一個(gè)陣列回來，這個(gè)陣列有四個(gè)元素 ：第一個(gè)元素的值是圖檔的寬（單位是pixel），第二個(gè)元素的值是圖檔的高度，第三個(gè)元素的值是圖檔的類型代號，比較常見的圖檔型式和它的代號分別是：1 是 GIF，2 是 JPG，3 是 PNG，.等等。第四個(gè)元素的值則是將圖檔的寬與高以“height=yyy width=xxx”型式表示的字串，有些情況下會直接拿它來當(dāng)做為 img 影像的標(biāo)籤?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-6 檔案格式判斷例如：若上傳一個(gè) JPEG

21、 圖檔 “c:photoflower.jpg”，它的大小是 640*480，執(zhí)行下一行程式之後： $chkImg=getimagesize(“c:photoflower.jpg”);那麼 getimagesize 函數(shù)回傳的 $chkImg 陣列內(nèi)容如下：$chkImg0=640$chkImg1=480$chkImg2=2$chkImg3=width=640 height=480不過，若上傳的檔案不是圖檔，那麼getimagesize 函數(shù)的回傳值則是 false。Step1:同樣開啟“”網(wǎng)頁。做上傳檔案格式的檢查，應(yīng)該寫在已經(jīng)成功上傳到暫存目錄之後，但還沒接著做後續(xù)搬移到最終目錄之前。因此，

22、待會兒要將加入檔案格式檢查的程式碼寫在I if(is_uploaded_file($_FILESuploadfiletmp_name) 之後的大括號中?；啬夸浵乱豁撋弦豁撓乱还?jié)15-2-6 檔案格式判斷將下列幾行程式碼貼到大括號後，目的就是希望能先確認(rèn)是圖檔後，再做後續(xù)檔案搬移與寫到資料庫的作業(yè)。若不是圖檔，die 指令會中斷程式的執(zhí)行。$chkImg=getimagesize($_FILESuploadfiletmp_name);if (!$chkImg)die(不是圖檔);回目錄下一頁上一頁下一節(jié)15-2-6 檔案格式判斷Step2:現(xiàn)在重新瀏覽“”網(wǎng)頁，來試試看如果上傳一個(gè) Excel

23、檔案，結(jié)果會怎麼樣。Step3:選取一個(gè) Excel 檔之後，按下送出鈕試著將檔案上傳。回目錄下一頁上一頁下一節(jié)15-2-6 檔案格式判斷結(jié)果，網(wǎng)頁上的錯(cuò)誤代碼欄位，出現(xiàn)了“不是圖檔”的錯(cuò)誤訊息。讀者可以自行檢查，因?yàn)檫@個(gè)檔案並沒有上傳成功，所以在網(wǎng)站的“files”資料夾下並不會有剛才選取的 Excel 檔案，同時(shí)資料庫裡也不會多這一筆檔案的記錄。這代表了我們加了圖檔檢查的功能已經(jīng)發(fā)揮功效，成功擋掉了非圖檔的上傳。回目錄下一頁上一頁下一節(jié)15-2-7 處理中文檔名的問題如果讀者現(xiàn)在試著上傳一個(gè)中文檔名的圖檔，會出現(xiàn)下列的錯(cuò)誤訊息：回目錄下一頁上一頁下一節(jié)15-2-7 處理中文檔名的問題原因是

24、UTF-8 編碼網(wǎng)頁無法在 Big5 系統(tǒng)正確處理中文檔名，而move_uploaded_file 函數(shù)也不能處理 UTF-8 中文編碼。因此，需要用 iconv 函數(shù)將檔名轉(zhuǎn)成 Big5 碼。譬如：move_uploaded_file($_FILESuploadfiletmp_name,$ finalname)要改為：move_uploaded_file($_FILESuploadfiletmp_name, iconv(utf-8, big5, $finalname)Step1:將move_uploaded_file 函數(shù)裡的第二個(gè)參數(shù)：$Server_filename 改成為：iconv(

25、utf-8, big5, $Server_filename)回目錄下一頁上一頁下一節(jié)15-2-7 處理中文檔名的問題回目錄下一頁上一頁下一節(jié)15-2-7 處理中文檔名的問題Step2:重新瀏覽“”網(wǎng)頁，試著上傳一個(gè)檔名有中文的圖檔：這次顯示的是檔案可以上傳成功的訊息了。回目錄下一頁上一頁下一節(jié)15-2-7 處理中文檔名的問題Step3:重新整理檔案面板的檔案清單，可以看到這個(gè)中文名稱的檔名已經(jīng)上傳到網(wǎng)站的“files”目錄下。同時(shí)“album”資料表格也加入這個(gè)檔案的記錄了。回目錄下一頁上一頁下一節(jié)15-3 建立縮圖由於使用者上傳的是原始大小的照片圖檔，這一節(jié)要說明如何將上傳的圖檔自動(dòng)按照它的

26、長寬比例縮小，好方便在網(wǎng)頁上瀏覽縮圖。若有興趣看某一張圖的原始大小，再點(diǎn)開縮圖來顯示原始大小的圖檔即可?；啬夸浵乱豁撋弦豁撓乱还?jié)15-3-1 縮圖的自定函數(shù)為了日後能讓其它同樣需要產(chǎn)生縮圖功能的網(wǎng)頁也能用到這段程式碼，所以將這整個(gè)建立縮圖的程式碼定義成一個(gè)自定函數(shù)，並獨(dú)立存成一個(gè)程式檔案。要用到這個(gè)函數(shù)時(shí)，再將這個(gè)程式檔包含（include）進(jìn)來，就可以直接引用它，不需重寫這段相同的程式碼了。將來源圖檔依照原圖的長寬比例複製到目的圖檔中（既然是要縮圖通常是將長寬縮?。谘}製的時(shí)候要指定目的圖檔的寬度或?qū)挾葍烧叩淖畲笾?，最後就能依需要完成指定大小的縮圖。先將這段程式碼完整列在以下“”檔案中。

27、 回目錄下一頁上一頁下一節(jié)15-3-1 縮圖的自定函數(shù)回目錄下一頁上一頁下一節(jié)15-3-1 縮圖的自定函數(shù)回目錄下一頁上一頁下一節(jié)15-3-1 縮圖的自定函數(shù)第 2 行中定義了這個(gè) imageResize 函數(shù)的三個(gè)參數(shù)：$srcfile 代表來源圖檔相對於網(wǎng)站主目錄的相對路徑與檔名，如“”。$dest 則是最後產(chǎn)生的縮圖檔位置，是相對於網(wǎng)站主目錄的相對路徑與檔名，如thumbnail/shrink-20090313051827-001.JPG。$MaxLen 則是完成後的縮圖，高度與寬度兩者的最大值。第 7 行 getimagesize 函數(shù)是要取得來源圖檔的檔案類型（.gif、.jpg、.

28、png），才能依不同的圖檔類型將圖檔內(nèi)容讀到記憶體與寫到目的圖檔。同時(shí)也要取得原圖的寬度與高度，才能計(jì)算縮圖的寬度與高度。第 12 行到第 22 行即是在計(jì)算目的圖檔，也就是產(chǎn)生的縮圖的寬度與高度。例如：若給 $MaxLen 參數(shù)的值是150，如果原圖是寬度大於高度（橫拍的照片），那麼完成的縮圖寬度是 150，高度則是按寬度縮小的相同比例去縮?。环粗?，若原圖是高度大於寬度（直拍的照片），那麼完成的縮圖高度是 150，寬度則是按高度縮小的相同比例去縮小?；啬夸浵乱豁撋弦豁撓乱还?jié)15-3-1 縮圖的自定函數(shù)第 25 行 imagecreatetruecolor 函數(shù)是在配置一塊記憶體的二維空間回來

29、，第一個(gè)參數(shù)是記憶體空間的寬度，第二個(gè)參數(shù)是記憶體空間的高度。$destImage=imagecreatetruecolor($destW, $destH) 的敘述就可以依照剛剛算出來目的圖檔的寬度與高度要求回傳所配置的記憶體空間位址。函數(shù)的回傳值是資源（Resource）型態(tài)，最後指派給 $destImage 變數(shù)，用它來取得這塊指向要存放目的圖檔內(nèi)容的記憶體空間。第 27 行到第 32 行則是視來源圖檔的格式，分別執(zhí)行imagecreatefromgif、imagecreatefromjpeg 或 imagecreatefrompng 函數(shù)，以便將來源圖檔的內(nèi)容讀到記憶體空間中。它的回傳值

30、也是資源型態(tài)，最後指派給 $srcImage 變數(shù)。回目錄下一頁上一頁下一節(jié)15-3-1 縮圖的自定函數(shù)第 34 行 imagecopyresampled 函數(shù)則是將一塊記憶體空間的內(nèi)容依照指定的大小複製到另一塊記憶體空間。imagecopyresampled的函數(shù)原型如下： bool imagecopyresampled(resource $dst_image, resource $src_image, int $dst_x, int $dst_y, int $src_x , int $src_y, int $dst_w, int $dst_h, int $src_w, int $src_h

31、)其中 $dst_image 與 $src_image 分別是指向複製目的與來源圖像記憶體空間的資源型態(tài)變數(shù)。$dst_x 與 $dst_y 是要複製到 $dst_image 內(nèi)的某塊區(qū)域，其左上角位置的X與 Y 座標(biāo)。若兩個(gè)數(shù)值都是 0 ，則表示是要複製到 $dst_image 本身最左上角的位置開始的區(qū)域中，不會有空白的地方?；啬夸浵乱豁撋弦豁撓乱还?jié)15-3-1 縮圖的自定函數(shù)$src_x 與 $src_y 則是要從 $src_image 內(nèi)的某塊區(qū)域做為複製來源的區(qū)塊，其左上角位置的X與 Y 座標(biāo)。若兩個(gè)數(shù)值都是 0，則表示要從來源圖像的最左上角位置開始複製。$dst_w 與 $dst_

32、h 則是要複製到 $dst_image 所指向區(qū)域的寬度與高度。$src_w 與 $ src_h 則是從 $src_image 中複製從左上角(座標(biāo)是 $src_x和$src_y)的位置算起，寬度與高度是多少的區(qū)域中。因?yàn)榈?34 行 $dst_x、$dst_y、$src_x 與$src_y的值都是0，所以將會依照我們?nèi)〉玫膩碓磮D檔內(nèi)容，完全複製到指定大小區(qū)域的記憶體中。Imagecopyresampled 函數(shù)本身會根據(jù)比例將圖形的像素做適度的放大或縮小。第 36 行到第 42 行則是依據(jù)圖案的格式分別執(zhí)行對應(yīng)的函數(shù) imagegif、imagejpeg 和imagepng 寫出到輸出的圖檔

33、。第一個(gè)參數(shù)是指向要輸出的影像的記憶體空間，第二個(gè)參數(shù)是要輸出的檔案。其中imagegif 還有個(gè)可省略的第三個(gè)參數(shù)，它代表壓縮的品質(zhì)（Quality），0代表最差的品質(zhì)，而 100 代表最好的品質(zhì)?；啬夸浵乱豁撋弦豁撓乱还?jié)15-3-2 運(yùn)用縮圖功能在完成了縮圖的自定函數(shù)之後，現(xiàn)在要將它包含在要利用這函數(shù)的 “”網(wǎng)頁中。Step1:打開“”。找個(gè)地方加入下列程式碼：include (resize.php);利用include敘述將“”包含進(jìn)來之後，待會就可以直接引用“”裡的自定函數(shù)“imageResize” 了?；啬夸浵乱豁撋弦豁摷尤脒@行敘述下一節(jié)15-3-2 運(yùn)用縮圖功能Step2:在網(wǎng)站的

34、主目錄下，建立一個(gè)專門存放縮圖圖檔的子目錄：“thumbnail”。Step3:現(xiàn)在要為縮圖指派它的存放目錄與檔名。在指派 $Server_filename 變數(shù)內(nèi)容的那一行程式碼後面，加入下列這一列程式碼：$thumb_filename= thumbnail/shrink- . date(YmdHis) . - . $originalfilename;回目錄下一頁上一頁建立放縮圖圖檔的子目錄下一節(jié)15-3-2 運(yùn)用縮圖功能Step4:將下列三行程式碼加到成功執(zhí)行 move_uploaded_file 函數(shù)，也就是檔案成功上傳之後的位置： $srcfile=iconv(utf-8, big5,

35、 $Server_filename);$destfile=iconv(utf-8, big5, $thumb_filename) ;imageResize($srcfile, $destfile, 160);以上加入的第三列程式碼，呼叫了 imageResize 自定函數(shù)，我們就是透過它來實(shí)際產(chǎn)生縮圖檔的?；啬夸浵乱豁撋弦豁撓乱还?jié)15-3-2 運(yùn)用縮圖功能Step5:修改產(chǎn)生SQL 指令的文字變數(shù) $insertSQL 那一行敘述改為以下程式碼，讓 縮圖檔名也一起存入資料庫表格中： $insertSQL=sprintf(INSERT INTO album (LocalName, ServNam

36、e, ThumbName, FileSize, Type, Comment) VALUES (%s, %s, %s, %s, %s, %s), GetSQLValueString($originalfilename , text), GetSQLValueString($Server_filename, “text”),GetSQLValueString($thumb_filename,text), GetSQLValueString($_FILESuploadfilesize,text),GetSQLValueString($_FILESuploadfiletype,text) GetSQL

37、ValueString($_POSTcomment, text) );回目錄下一頁上一頁這幾個(gè)地方都要修改下一節(jié)15-3-2 運(yùn)用縮圖功能Step6: 現(xiàn)在可以儲存網(wǎng)頁，重新瀏覽“”?；啬夸浵乱豁撋弦豁撓乱还?jié)15-3-2 運(yùn)用縮圖功能在檔案面板中可看到上傳到“files”資料夾中大小與上傳的圖檔相同的檔案，以及產(chǎn)生在“thumbnail”資料夾下縮圖檔。再看看資料表格中，這次加入的記錄，也將縮圖檔的路徑與檔名寫入了“ThumbName”欄位中?；啬夸浵乱豁撋弦豁撋蟼鞯臋n案縮圖下一節(jié)15-4 瀏覽相簿在這一節(jié)我們終於要在首頁裡瀏覽相簿裡的照片了。因?yàn)橐竟?fàn)一次可以顯示好幾張照片縮圖的效果，請讀者

38、先自行上傳多張照片到網(wǎng)站中。記得試著上傳些直拍與橫拍的照片，試試產(chǎn)生縮圖的功能在高度大於寬度與寬度大於高度兩種情況是否都可以正常運(yùn)作。另外，因?yàn)?Dreamweaver 內(nèi)建重複區(qū)域的資料顯示方式，資料永遠(yuǎn)只有用一個(gè)“欄”來顯示，N 筆資料就有 N 列。為了讓縮圖照片改以多列且多欄的方式瀏覽，我們將以 Horizontal Looper 這個(gè) Dreamweaver 擴(kuò)充元件來達(dá)到這個(gè)效果?；啬夸浵乱豁撋弦豁撓乱还?jié)15-4-1 安裝 Horizontal Looper首先先完成 Horizontal Looper 的安裝，待會才能用它來製作多列多欄的重複區(qū)域。Step1:連上 Tom-Muck

39、 的網(wǎng)站： 往下捲頁到最後一頁，點(diǎn)選到下載的地方。注意要選PHP 的版本，它會出現(xiàn)下載檔案“”的對話窗。捲到網(wǎng)頁的最下方位置下載PHP 版本程式回目錄下一頁上一頁下一節(jié)15-4-1 安裝 Horizontal LooperStep2:檔案“”完成下載之後，執(zhí)行這個(gè)安裝程式檔案就可以開始安裝擴(kuò)充元件。出現(xiàn)以下畫面時(shí)按接受。回目錄下一頁上一頁下一節(jié)15-4-1 安裝 Horizontal LooperStep3:按照指示完成安裝後，就會在 Dreamweaver 的擴(kuò)充元件管理視窗中看到 Horizontal Looper 已經(jīng)安裝完成。如果剛剛在安裝Horizontal Looper時(shí)沒有先將

40、Dreamweaver 關(guān)掉，那麼現(xiàn)在必須先將 Dreamweaver 關(guān)閉再重新啟動(dòng)才能使用 Horizontal Looper 這個(gè)新加入的擴(kuò)充元件。安裝好了回目錄下一頁上一頁下一節(jié)15-4-2 瀏覽照片縮圖清單接著就要製作可以瀏覽相簿中所有照片縮圖的首頁了。Step1：打開首頁“”網(wǎng)頁。Step2：首先建立資料集 rs_album，它 的定義如下：建立資料集回目錄下一頁上一頁下一節(jié)15-4-2 瀏覽照片縮圖清單Step3:從繫結(jié)面板將資料集的欄位拖曳到表格的欄位中，做為欄位的資料來源，並將每個(gè)欄位的對齊方式設(shè)為置中。完成的畫面如下：設(shè)定欄位的資料來源回目錄下一頁上一頁Step4:選取網(wǎng)頁

41、中 rs_album.ThumbName 的地方，再切換到程式碼模式。下一節(jié)15-4-2 瀏覽照片縮圖清單$row_rs_albumThumbName 是相片縮圖的存放路徑與檔名，現(xiàn)在要將它變成為放在 img影像物件的 src （圖檔來源位置）標(biāo)籤值。將 改為下列程式碼：img src= / 例如，當(dāng)要顯示的照片縮圖檔位置是在：“”時(shí)，那麼所產(chǎn)生的HTML 碼便是：回目錄下一頁上一頁下一節(jié)15-4-2 瀏覽照片縮圖清單Step5:再來改檔案大小的部份。因?yàn)樵谫Y料庫裡儲存的“FileSize”資料欄位所用的單位是位元組（Byte），現(xiàn)在要將它除以 1024，單位則改用“K ”（1024 Byte

42、s）來表示。將下列這行程式碼：改為以下這一行程式碼：至於用 Round(N,0) 函數(shù)則是將 N 值取四捨五入到整數(shù)位數(shù)?；啬夸浵乱豁撋弦豁撓乱还?jié)15-4-2 瀏覽照片縮圖清單Step6:接下來是重頭戲了。現(xiàn)在您瀏覽這個(gè)網(wǎng)頁，只會看到第一張照片的縮圖，那是因?yàn)檫€沒有設(shè)好重複區(qū)域?，F(xiàn)在就要靠剛才安裝好的Horizontal Looper 了。這個(gè)網(wǎng)頁的表格其實(shí)有兩層：外層的表格框住整個(gè)相簿，內(nèi)層的表格則是一張照片的資料範(fàn)圍。和設(shè)定重複區(qū)域時(shí)一樣，要先選取要重複顯示資料的表格區(qū)域。選取整個(gè)內(nèi)層表格，再從伺服器行為面板中執(zhí)行DW Team下的Horizontal Looper MX，這也是 Hori

43、zontal Looper 安裝好之後所加入的執(zhí)行路徑?；啬夸浵乱豁撋弦豁撓乱还?jié)15-4-2 瀏覽照片縮圖清單選取內(nèi)層表格在設(shè)定 Horizontal Looper 屬性的視窗中，將資料集設(shè)為 rs_album，顯示方式則設(shè)為 2 列 * 5 欄：回目錄下一頁上一頁下一節(jié)15-4-2 瀏覽照片縮圖清單Step7:最後，為了讓使用者在瀏覽相簿時(shí)可以跳頁，還要加上內(nèi)建的資料集導(dǎo)覽列按鈕。將插入點(diǎn)移到表格的最後一列中，然後從選單中執(zhí)行插入資料物件資料集（Recordset）分頁資料集導(dǎo)覽列按鈕，在設(shè)定的視窗中將資料集設(shè)為rs_album。插入點(diǎn)移到這裡加入資料集導(dǎo)覽列按鈕之後可以將它選取，再將對齊方

44、式設(shè)為置中。完成後的畫面如下：回目錄下一頁上一頁下一節(jié)15-4-2 瀏覽照片縮圖清單Step8:。現(xiàn)在，終於可以瀏覽期待已久的相簿首頁畫面了?；啬夸浵乱豁撋弦豁撓乱还?jié)15-5 檢視照片原圖由於目前首頁只有顯示縮圖，現(xiàn)在要再加上檢視照片原圖的功能。當(dāng)使用者點(diǎn)下某一張縮圖，就可以開啟另一個(gè)網(wǎng)頁來顯示這張照片原本大小的影像。Step1:首先在“”網(wǎng)頁中選取縮圖的影像物件，要先為它設(shè)連結(jié)。嚐試改變一下作法，直接用修改程式碼的方式。切換到程式碼模式，找到剛才設(shè)的顯示縮圖的 標(biāo)籤：img src= / 將上面的 img 標(biāo)籤改為以下寫法：a href=display.php?ID=img src= / 回

45、目錄下一頁上一頁下一節(jié)15-5 檢視照片原圖上面將 img 標(biāo)籤包圍在用 與 定義的超連結(jié)範(fàn)圍之中，這樣設(shè)的目的是當(dāng)點(diǎn)下某張影像時(shí)，就會連到這張影像所對應(yīng)的連結(jié)網(wǎng)址。超連結(jié)的目標(biāo)網(wǎng)址則是用 href 這個(gè)標(biāo)籤屬性來定義的。像是：href=display.php?ID=4 就是代表傳遞參數(shù) ID=4 的值到另一個(gè)網(wǎng)頁“”。Step2:接下來要來設(shè)定顯示原圖的“”網(wǎng)頁。先開啟“”網(wǎng)頁?；啬夸浵乱豁撋弦豁撓乱还?jié)15-5 檢視照片原圖Step3:建立資料集 rs_photo，定義如下圖所示。注意它的篩選條件是照片代號（ID）欄位和傳過來 URL 參數(shù) ID 的值相同的照片資料記錄。這樣正常情況下所篩選

46、出來的資料集只會剛好有一筆記錄，也就是要從“album”表格中找出 ID 欄位的值與從“”所傳過來的URL參數(shù) ID 相同的那一筆照片資料記錄。Step4:將表格中欄位的資料來源設(shè)為資料集的欄位，並將欄位的對齊方式都設(shè)為置中。設(shè)好的畫面如下：回目錄下一頁上一頁下一節(jié)15-5 檢視照片原圖Step5:將切換到程式碼模式，同樣要修改幾個(gè)欄位的標(biāo)籤。將第一列顯示原圖影像的標(biāo)籤：改為：img src=/將第三列顯示原圖檔案大小的標(biāo)籤：同樣改為以“K”表示：回目錄下一頁上一頁下一節(jié)15-5 檢視照片原圖Step6:現(xiàn)在儲存剛剛變更到的所有網(wǎng)頁，再重新瀏覽“”網(wǎng)頁。在相簿裡點(diǎn)下任一張照片的縮圖，左下角的網(wǎng)

47、址列就會顯示它將連結(jié)到 “”，後面並且?guī)е菑堈掌?ID。按下滑鼠後可以就會開啟 “” 網(wǎng)頁，顯示照片的原始大小。點(diǎn)下一張照片縮圖連結(jié)的網(wǎng)址與參數(shù)回目錄下一頁上一頁下一節(jié)15-5 檢視照片原圖顯示照片原本的大小回目錄下一頁上一頁下一節(jié)15-6 下載檔案回目錄下一頁上一頁下一節(jié)許多網(wǎng)站都提供下載檔案的功能，讓使用者可以從網(wǎng)站上取得檔案，並存在自己的電腦中。由於使用者上傳的檔案名稱可能含有中文，在處理時(shí)必須再用 iconv 函數(shù)將檔名轉(zhuǎn)碼。從這個(gè)相簿下載檔案的大致流程是：要從首頁點(diǎn)選要下載圖檔的照片，然後將照片圖檔路徑與原始的檔名這兩個(gè)參數(shù)傳給另一個(gè)網(wǎng)頁來處理檔案下載。檔名裡有中文字元15-6

48、下載檔案回目錄下一頁上一頁程式說明：第 2行和第 3 行都用了 iconv 函數(shù)，將從首頁傳過來的網(wǎng)址參數(shù)列中，ServName 和 LocalName 這兩個(gè)參數(shù)的值都轉(zhuǎn)碼為 BIG5碼，否則瀏覽器會認(rèn)不得中文的部份。第 4行利用 file_exists 函數(shù)先檢查放在網(wǎng)站中的原始圖檔是否還存在。雖然前面我們已經(jīng)將圖檔上傳成功，但難保證在這段期間是否發(fā)生檔案被系統(tǒng)管理者手動(dòng)清除，或是其它情況以致於檔案已無法供使用者下載。首先，先製作下載檔案的“”網(wǎng)頁。在“”網(wǎng)頁輸入下列程式碼：下一節(jié)15-6 下載檔案回目錄下一頁上一頁第 9 行到第 11 行使用 header 函數(shù)來傳送 HTTP 的檔頭，它們在定義與這次下傳檔案有關(guān)的設(shè)定，包括傳輸資料的格式。其中“Content-Disposition”後面是在定義下載視窗中預(yù)設(shè)顯示的儲存檔案名稱，這樣我們就可以利用這個(gè)機(jī)會顯示使用者上傳時(shí)檔案的原始名稱了。第 12 行呼叫的 readfile 函數(shù)會開啟參數(shù)裡的檔案並輸出到輸出的緩衝區(qū)（Output Buffer）。當(dāng)使用者在儲存對話窗中（Save Dialogue）中確定好儲存的路徑與檔名要開始儲存時(shí)，才會將緩衝區(qū)的內(nèi)容正式下載。下一節(jié)15-6 下載檔案回目錄下一頁上一頁接著要在