第三个资料库网站实例-个人网路相簿

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

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

3、網站架構要從使用者的電腦上傳檔案到網站上，要透過上傳檔案的網頁，以便從 Client 端指定要上傳的檔案路徑與檔名：回目錄下一頁上一頁下一節15-1-1 定義網站架構網站的首頁可以列出目前網站上所有的已上傳檔案清單的網頁，包括檔案型態、檔案大小，以及描述說明。從這個相簿首頁，使用者可以檢視某個照片的原始圖檔，以及下載原始圖檔與刪除照片。回目錄下一頁上一頁下一節15-1-1 定義網站架構從使用者的電腦上傳檔案到網站上，要透過上傳檔案的網頁，以便從 Client 端指定要上傳的檔案路徑與檔名：複製光碟目錄：Examplechap14bikeInitial將以C:AppServwwwalbum做為“

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

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

6、t 端，一是網站的 Server 端。 Client使用者要先從網頁上選取要上傳的檔案，然後執行上傳功能。事實上檔案是只有傳至網站中的暫存目錄。暫存目錄是定義在 php.ini 中的 upload_tmp_dir 參數中所指定。檔案複製到網站的暫存目錄時，系統會自動以亂數產生暫存檔的檔名儲存在這暫存目錄下，通常產生的暫存檔案是用“php+亂數.tmp”的檔名格式來命名。 Server在上傳檔案的網頁程式結束之前，必須從暫存目錄下將它複製或搬移到網站中指定的目錄下。複製或搬移的同時，也可以利用這個機會將檔案正名回來，改回原先從使用者端上傳時的原始檔名。回目錄下一頁上一頁下一節15-2-1 上傳檔

7、案的流程暫存目錄最後目錄回目錄下一頁上一頁下一節15-2-2 上傳檔案的相關設定回目錄下一頁上一頁在 php.ini 設定檔中有些設定與上傳檔案的功能相關，將它們整理如下表：通常在設定上傳檔案的大小限制時，要依照 memory_limit post_max_size upload_max_size 的原則。在每個上傳檔案的網頁裡，會再以 max_file_size 做為上傳檔案的限制。即使在網頁中將 max_file_size 的限制放寬了，若設到超過上面表格中參數的限制，到最後仍會被在 php.ini 設的限制給卡住。回目錄下一頁上一頁下一節15-2-3 設計上傳檔案的網頁首先先製作一個可以

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

9、個地方要請讀者自行修改，其它都已幫你設好了。回目錄下一頁上一頁下一節15-2-3 設計上傳檔案的網頁切換到程式碼模式，來看一下產生的程式碼：關於表單的屬性部份： action=add.php“檔案上傳後，表單的內容要傳遞給“add.php”網頁。 method=post“表單的內容要用 POST 的方式傳遞到指定的網頁。回目錄下一頁上一頁下一節15-2-3 設計上傳檔案的網頁enctype=multipart/form-data“可以讓使用者傳各式型態的檔案。至於檔案欄位的部份： name=uploadfile“傳遞的檔案欄位名稱是“uploadfile”。待會接收它的“add.php”網頁會

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

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

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

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

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

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

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

17、成功的地方，改為以下用大括號括起來的一點程式碼。回目錄下一頁上一頁下一節15-2-5 新增記錄到資料表格將前兩章的實例中的程式碼中，有關執行 SQL指令的部份拿來做修改。因為這段程式碼最後要用 mysql_select_db 去執行 SQL語法，要用到資料庫連結，所以才要加入下列 require_once敘述來包含定義這個網站資料庫連結的程式檔“”：require_once(Connections/dbconn_album.php);至於 SQL 語法中的表格名稱、欄位名稱、資料庫連線名稱等，也都做了修改。回目錄下一頁上一頁下一節15-2-5 新增記錄到資料表格Step2:剛才所加的程式碼了，

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

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

20、案的檔案類型做些檢查，防堵掉不是圖檔的檔案。PHP 有個 getimagesize 函數可以判斷一個檔案是不是圖檔。若給定的檔案是個圖檔，它會回傳一個陣列回來，這個陣列有四個元素 ：第一個元素的值是圖檔的寬（單位是pixel），第二個元素的值是圖檔的高度，第三個元素的值是圖檔的類型代號，比較常見的圖檔型式和它的代號分別是：1 是 GIF，2 是 JPG，3 是 PNG，.等等。第四個元素的值則是將圖檔的寬與高以“height=yyy width=xxx”型式表示的字串，有些情況下會直接拿它來當做為 img 影像的標籤。回目錄下一頁上一頁下一節15-2-6 檔案格式判斷例如：若上傳一個 JPEG

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

22、待會兒要將加入檔案格式檢查的程式碼寫在I if(is_uploaded_file($_FILESuploadfiletmp_name) 之後的大括號中。回目錄下一頁上一頁下一節15-2-6 檔案格式判斷將下列幾行程式碼貼到大括號後，目的就是希望能先確認是圖檔後，再做後續檔案搬移與寫到資料庫的作業。若不是圖檔，die 指令會中斷程式的執行。$chkImg=getimagesize($_FILESuploadfiletmp_name);if (!$chkImg)die(不是圖檔);回目錄下一頁上一頁下一節15-2-6 檔案格式判斷Step2:現在重新瀏覽“”網頁，來試試看如果上傳一個 Excel

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

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

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

26、長寬比例縮小，好方便在網頁上瀏覽縮圖。若有興趣看某一張圖的原始大小，再點開縮圖來顯示原始大小的圖檔即可。回目錄下一頁上一頁下一節15-3-1 縮圖的自定函數為了日後能讓其它同樣需要產生縮圖功能的網頁也能用到這段程式碼，所以將這整個建立縮圖的程式碼定義成一個自定函數，並獨立存成一個程式檔案。要用到這個函數時，再將這個程式檔包含（include）進來，就可以直接引用它，不需重寫這段相同的程式碼了。將來源圖檔依照原圖的長寬比例複製到目的圖檔中（既然是要縮圖通常是將長寬縮小），而在複製的時候要指定目的圖檔的寬度或寬度兩者的最大值，最後就能依需要完成指定大小的縮圖。先將這段程式碼完整列在以下“”檔案中。

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

28、png），才能依不同的圖檔類型將圖檔內容讀到記憶體與寫到目的圖檔。同時也要取得原圖的寬度與高度，才能計算縮圖的寬度與高度。第 12 行到第 22 行即是在計算目的圖檔，也就是產生的縮圖的寬度與高度。例如：若給 $MaxLen 參數的值是150，如果原圖是寬度大於高度（橫拍的照片），那麼完成的縮圖寬度是 150，高度則是按寬度縮小的相同比例去縮小；反之，若原圖是高度大於寬度（直拍的照片），那麼完成的縮圖高度是 150，寬度則是按高度縮小的相同比例去縮小。回目錄下一頁上一頁下一節15-3-1 縮圖的自定函數第 25 行 imagecreatetruecolor 函數是在配置一塊記憶體的二維空間回來

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

30、也是資源型態，最後指派給 $srcImage 變數。回目錄下一頁上一頁下一節15-3-1 縮圖的自定函數第 34 行 imagecopyresampled 函數則是將一塊記憶體空間的內容依照指定的大小複製到另一塊記憶體空間。imagecopyresampled的函數原型如下： 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 分別是指向複製目的與來源圖像記憶體空間的資源型態變數。$dst_x 與 $dst_y 是要複製到 $dst_image 內的某塊區域，其左上角位置的X與 Y 座標。若兩個數值都是 0 ，則表示是要複製到 $dst_image 本身最左上角的位置開始的區域中，不會有空白的地方。回目錄下一頁上一頁下一節15-3-1 縮圖的自定函數$src_x 與 $src_y 則是要從 $src_image 內的某塊區域做為複製來源的區塊，其左上角位置的X與 Y 座標。若兩個數值都是 0，則表示要從來源圖像的最左上角位置開始複製。$dst_w 與 $dst_

32、h 則是要複製到 $dst_image 所指向區域的寬度與高度。$src_w 與 $ src_h 則是從 $src_image 中複製從左上角(座標是 $src_x和$src_y)的位置算起，寬度與高度是多少的區域中。因為第 34 行 $dst_x、$dst_y、$src_x 與$src_y的值都是0，所以將會依照我們取得的來源圖檔內容，完全複製到指定大小區域的記憶體中。Imagecopyresampled 函數本身會根據比例將圖形的像素做適度的放大或縮小。第 36 行到第 42 行則是依據圖案的格式分別執行對應的函數 imagegif、imagejpeg 和imagepng 寫出到輸出的圖檔

33、。第一個參數是指向要輸出的影像的記憶體空間，第二個參數是要輸出的檔案。其中imagegif 還有個可省略的第三個參數，它代表壓縮的品質（Quality），0代表最差的品質，而 100 代表最好的品質。回目錄下一頁上一頁下一節15-3-2 運用縮圖功能在完成了縮圖的自定函數之後，現在要將它包含在要利用這函數的 “”網頁中。Step1:打開“”。找個地方加入下列程式碼：include (resize.php);利用include敘述將“”包含進來之後，待會就可以直接引用“”裡的自定函數“imageResize” 了。回目錄下一頁上一頁加入這行敘述下一節15-3-2 運用縮圖功能Step2:在網站的

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

35、 $Server_filename);$destfile=iconv(utf-8, big5, $thumb_filename) ;imageResize($srcfile, $destfile, 160);以上加入的第三列程式碼，呼叫了 imageResize 自定函數，我們就是透過它來實際產生縮圖檔的。回目錄下一頁上一頁下一節15-3-2 運用縮圖功能Step5:修改產生SQL 指令的文字變數 $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) );回目錄下一頁上一頁這幾個地方都要修改下一節15-3-2 運用縮圖功能Step6: 現在可以儲存網頁，重新瀏覽“”。回目錄下一頁上一頁下一節15-3-2 運用縮圖功能在檔案面板中可看到上傳到“files”資料夾中大小與上傳的圖檔相同的檔案，以及產生在“thumbnail”資料夾下縮圖檔。再看看資料表格中，這次加入的記錄，也將縮圖檔的路徑與檔名寫入了“ThumbName”欄位中。回目錄下一頁上一頁上傳的檔案縮圖下一節15-4 瀏覽相簿在這一節我們終於要在首頁裡瀏覽相簿裡的照片了。因為要示範一次可以顯示好幾張照片縮圖的效果，請讀者

38、先自行上傳多張照片到網站中。記得試著上傳些直拍與橫拍的照片，試試產生縮圖的功能在高度大於寬度與寬度大於高度兩種情況是否都可以正常運作。另外，因為 Dreamweaver 內建重複區域的資料顯示方式，資料永遠只有用一個“欄”來顯示，N 筆資料就有 N 列。為了讓縮圖照片改以多列且多欄的方式瀏覽，我們將以 Horizontal Looper 這個 Dreamweaver 擴充元件來達到這個效果。回目錄下一頁上一頁下一節15-4-1 安裝 Horizontal Looper首先先完成 Horizontal Looper 的安裝，待會才能用它來製作多列多欄的重複區域。Step1:連上 Tom-Muck

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

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

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

42、s）來表示。將下列這行程式碼：改為以下這一行程式碼：至於用 Round(N,0) 函數則是將 N 值取四捨五入到整數位數。回目錄下一頁上一頁下一節15-4-2 瀏覽照片縮圖清單Step6:接下來是重頭戲了。現在您瀏覽這個網頁，只會看到第一張照片的縮圖，那是因為還沒有設好重複區域。現在就要靠剛才安裝好的Horizontal Looper 了。這個網頁的表格其實有兩層：外層的表格框住整個相簿，內層的表格則是一張照片的資料範圍。和設定重複區域時一樣，要先選取要重複顯示資料的表格區域。選取整個內層表格，再從伺服器行為面板中執行DW Team下的Horizontal Looper MX，這也是 Hori

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

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

45、目錄下一頁上一頁下一節15-5 檢視照片原圖上面將 img 標籤包圍在用 與 定義的超連結範圍之中，這樣設的目的是當點下某張影像時，就會連到這張影像所對應的連結網址。超連結的目標網址則是用 href 這個標籤屬性來定義的。像是：href=display.php?ID=4 就是代表傳遞參數 ID=4 的值到另一個網頁“”。Step2:接下來要來設定顯示原圖的“”網頁。先開啟“”網頁。回目錄下一頁上一頁下一節15-5 檢視照片原圖Step3:建立資料集 rs_photo，定義如下圖所示。注意它的篩選條件是照片代號（ID）欄位和傳過來 URL 參數 ID 的值相同的照片資料記錄。這樣正常情況下所篩選

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

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

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