Transcript ch14 資料庫網站實例2-網路相簿教學投影

Chapter 14
資料庫網站實例2-網路相簿
本章將介紹如何在網站上提供上傳與下載檔案的功能，並以一個小而美
的個人網路相簿做為應用。
既然是網路相簿，那麼應該只能接受上傳的檔案是圖檔，在上傳檔案的
地方做檔案類型的檢查，避免使用者上傳非圖檔的檔案。為了方便在網
頁上一次瀏覽相簿裡的許多照片，會介紹如何寫出自動產生縮圖的功能
，以及M 列 * N 行的資料呈現方式 。最後再介紹刪除已上傳到網站的檔
案，以及從網站下載檔案到自己的電腦中。
開始
離開
＊教科書投影片同教科書受著作權保護，僅供教師作為授課用途。學校教師得使用投
影片，於授課期間，搭配用書進行教學；由於投影片極易重製、列印、出版，為避免
第三人（含學生）因不知情而發生侵權行為，請支持與協助不將教學投影片以任何型
式移轉予第三人使用。如有特殊需求，請向出版社申請授權協議。
目錄
14-1
14-2
14-3
14-4
14-5
14-6
14-7
準備工作
上傳檔案
建立縮圖
瀏覽相簿
檢視照片原圖
下載檔案
刪除已上傳檔案
回章首
上一頁
下一頁
離開
14-1 準備工作
先在腦海裡整理一下這個網路相簿，應該要有哪些網頁。
首先，必須有上傳檔案到網站的功能。
再來要有一個可以顯示目前已上傳到網站的所有影像圖檔清單的網頁。
在這個網頁上，可以讓使用者下載某個檔案，也可以點選檢視某個圖
檔的原始大小。
這樣就可以大致規劃出網站的架構出來了。
下一節
上一頁
下一頁
回目錄
14-1-1 定義網站架構
要從使用者的電腦上傳檔案到網站上，要透過上傳檔案的網頁，以
便從 Client 端指定要上傳的檔案路徑與檔名：
下一節
上一頁
下一頁
回目錄
14-1-1 定義網站架構
網站的首頁可以列出目前網站上所有的已上傳檔案清單的網頁，包
括檔案型態、檔案大小，以及描述說明。
從這個相簿首頁，使用者可以檢視某個照片的原始圖檔，以及下載
原始圖檔與刪除照片。
下一節
上一頁
下一頁
回目錄
14-1-1 定義網站架構
從使用者的電腦上傳檔案到網站上，要透過上傳檔案的網頁，以便
從 Client 端指定要上傳的檔案路徑與檔名：
複製光碟目錄：Example\chap14\1.Initial\album
將以C:\AppServ\www\album做為“Cheese Cake做法-相簿”的相
簿網站主目錄。
下一節
上一頁
下一頁
回目錄
14-1-1 定義網站架構
定義網站時的設定如下：
下一節
上一頁
下一頁
回目錄
14-1-1 定義網站架構
Dreamweaver 中的網站定義設定畫面如下：
下一節
上一頁
下一頁
回目錄
14-1-2 準備資料庫內容
想想這個網路相簿需要哪些資料表格。它只需要儲存目前上傳至網站的所有
檔案的清單，包括它的原始檔名、放在網站的路徑與檔案、縮圖的路徑與檔
案、檔案大小、描述文字等資訊。
一旦有傳案上傳至網站，就在這表格插入一筆記錄以便存放該檔案的資訊；
若刪除檔案，也要同步將該檔案的資料從資料表格中刪除。將這個資料表格
也取名為：album。
當您從本書光碟下的：
Example\chap14\2.ImportData\album.SQL 匯入資料庫，
“album”表格的欄位定義如下：
下一節
上一頁
下一頁
回目錄
14-1-3 建立 MySQL 資料庫連線
為這個網站設定資料庫連線如下：
下一節
上一頁
下一頁
回目錄
14-2 上傳檔案
用 PHP來製作處理上傳檔案的網頁，只要編寫幾行程式碼就完成了。
尤其我們是用 Dreamweaver 來設計所需要的元件，要寫的程式碼
更少。
過，在這裡要先說明 PHP 上傳檔案的機制，以便者了解上傳檔案
背後的過程。
下一節
上一頁
下一頁
回目錄
14-2-1 上傳檔案的流程
利用 PHP 來上傳檔案，主要可從兩個角度來看，一是上傳檔案的
使用者 Client 端，一是網站的 Server 端。
 Client
使用者要先從網頁上選取要上傳的檔案，然後執行上傳功能。事實
上檔案是只有傳至網站中的暫存目錄。暫存目錄是定義在 php.ini 中
的 upload_tmp_dir 參數中所指定。
檔案複製到網站的暫存目錄時，系統會自動以亂數產生暫存檔的檔
名儲存在這暫存目錄下，通常產生的暫存檔案是用“php+亂數.tmp”
的檔名格式來命名。
 Server
在上傳檔案的網頁程式結束之前，必須從暫存目錄下將它複製或搬
移到網站中指定的目錄下。
複製或搬移的同時，也可以利用這個機會將檔案正名回來，改回原
先從使用者端上傳時的原始檔名。
下一節
上一頁
下一頁
回目錄
14-2-1 上傳檔案的流程
暫存目錄
最後目錄
下一節
上一頁
下一頁
回目錄
14-2-2 上傳檔案的相關設定
在 php.ini 設定檔中有些設定與上傳檔案的功能相關，將它們整理如下表：
通常在設定上傳檔案的大小限制時，要依照 memory_limit > post_max_size >
upload_max_size 的原則。在每個上傳檔案的網頁裡，會再以 max_file_size
做為上傳檔案的限制。即使在網頁中將 max_file_size 的限制放寬了，若設到
超過上面表格中參數的限制，到最後仍會被在 php.ini 設的限制給卡住。
下一節
上一頁
下一頁
回目錄
14-2-3 設計上傳檔案的網頁
首先先製作一個可以讓使用者選取要上傳檔案的網頁。
Step1:開啟“uploadselect.php”網頁。這個網頁裡有一個表單，表單裡有一
個隱藏欄位、一個檔案（File）欄位，及供使用者輸入相片註解的文字欄位，
和表單按鈕。
檔案欄位
Step2:注意隱藏欄位的名稱要取名為：MAX_FILE_SIZE，而且要將它放在表
單裡的第一個元件位置。這裡所設的“值”代表上傳檔案的大小限制，其中檔
案大小的單位是位元組（Byte）。待會這個限制會被加到表單中一起送出。
下一節
上一頁
下一頁
回目錄
14-2-3 設計上傳檔案的網頁
Step3:選取整個表單，「方法」欄位用預設的：POST，而「動作」欄位則將它設
為待會要將表單用 POST 方法傳遞過去的網頁名稱：add.php。這個網頁只有這個
地方要請讀者自行修改，其它都已幫你設好了。
下一節
上一頁
下一頁
回目錄
14-2-3 設計上傳檔案的網頁
切換到程式碼模式，來看一下產生的程式碼：
關於表單的屬性部份：
 action="upload.php “
檔案上傳後，表單的內容要傳遞給“upload.php”網頁。
 method="post“
表單的內容要用 POST 的方式傳遞到指定的網頁。
下一節
上一頁
下一頁
回目錄
14-2-3 設計上傳檔案的網頁
enctype="multipart/form-data“
可以讓使用者傳各式型態的檔案。
至於檔案欄位的部份：
<input type="file" name="uploadfile" id="uploadfile" />
 name="uploadfile“
傳遞的檔案欄位名稱是“uploadfile”。待會接收它的“add.php”網頁會以
“uploadfile”做為變數名稱來顯示上傳檔案的檔名、暫存檔名、大小、檔案型
態…等屬性。
如果現在執行這個網頁，在沒問題的情況下，檔案就會上傳到網站的暫存目錄
中。
至於不成功的原因，不外乎是還沒選取要上傳的檔案就上傳，或是選取的上傳
檔案大小超過設定的檔案大小限制。
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
現在就來做可以顯示剛才從“uploadselect.php” 網頁上傳檔案的相關資訊，接
著再將上傳到網站的暫存檔案移到最後要存放的網站目錄下。
Step1:開啟“upload.php”網頁。這個網頁裡有一個表格。待會要將每個欄位
顯示的值都用程式碼來完成。
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
Step2:先將插入點移到“檔案名稱”後的欄位中，再切換到程式碼模式。
切換到程式碼模式
將 &nbsp;（代表空白字元）的地方改為下列程式碼：
<?php echo $_FILES['uploadfile']['name']; ?>
其中 $_FILES[‘uploadfile’][‘name’] 的寫法目的是在取得“uploadfile”這個傳
過來的檔案變數的原始檔案名稱的屬性。“uploadfile”是在前面所完成
的“uploadselect.php”網頁中的檔案欄位元件名稱。
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
Step3:把其它幾個資料欄位的位置也分別改用下列對應的程式碼取代：
Step4:至於“註解”的部份，因為它的內容是從“uploadselect.php”網頁透
過POST 方法將表單裡的 comment 文字欄位傳過來的，所以要用
$_POST['comment'] 的寫法來取得註解欄位的值。
切到程式碼模式，將註解欄位後的 &nbsp; 改成：
<?php echo $_POST['comment']; ?>
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
Step5:至於“錯誤代碼”的部份，其實也可以直接輸入 <?php echo
$_FILES[‘uploadfile’][‘error’]; ?> 即可。
不過錯誤訊息的顯示和上傳成功的後續處理都會寫在這裡，請先參考以下畫面，
在錯誤代碼欄位的位置輸入下列程式碼：
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
$_FILES[‘uploadfile’][‘err
or’] 就是上傳檔案時的錯
誤碼，如果它的值是 0，
代表上傳成功，也就是檔
案已經傳到網站的暫存目
錄了，可以接著進行將暫
存檔案搬到最後儲存目錄
的後續動作。
這裡我們將所有處理上傳
成功後續動作的相關程式
碼一起寫在當錯誤代碼是
0 的地方。
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
其中的第一大段程式碼，是在判斷從使用者端將檔案上傳至網站的暫存目錄的
過程有沒有錯誤。若錯誤代碼是0，才表示成功；若大於0，則表示有問題，不
同的代碼分別代表不同意義。
die 敘述和 exit 有點類似，是指跳離程式，小括號內的參數表示要離開程式前
要先印出的訊息文字。
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
至於第二大段程式碼，
則是在將暫存檔案搬
到最後存放這檔案的
目標目錄底下。先用
is_uploaded_file函
數來判斷小刮號中的
暫存檔案是否有成功
的上傳到網站。
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
為了取得上傳檔案原本在使用者端的檔案名稱，特別用 $originalfilename
變數來取得$_FILES['uploadfile']['name'] 的值。
move_uploaded_file 函數的作用是將第一個參數指定的上傳的檔案搬移至
第二個參數指定的目錄及檔名，若執行成功則回傳 true，失敗則回傳
false。
為了怕使用者用相同檔名的檔案前後上傳到網站，會造成之前的檔案內容
被覆蓋掉，所以特地在原始檔名前加上 date(“YmdHis”)，讓檔案前面有到
時分秒的時間以避免檔名重覆的問題。
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
Step6:相信您現在一定很想趕快
來試試這個上傳檔案的功
能究竟能不能 “work ”
了吧!先來做個錯誤示範。
首先回到
“ uploadselect.php”，
瀏覽這個網頁畫面。按下
「瀏覽」鈕：
選擇上傳的檔案，再按「開啟舊
檔」鈕：
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
按下「送出」鈕。
出現下面這個畫面
裡怎麼有錯誤訊息
“目錄不存在或無
法寫入”。原來是
因為我們要將暫存
檔案搬到目的目錄
$DestDir =“files” 底
下，但是我們還沒
有先建立好“files”
這個子目錄呢。
有錯誤訊息
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
所以，要先回 Dreamweaver 建
立“files”子目錄。
在「檔案」面板中，選取網站的
主目錄位置，按滑鼠右鍵，在選
單中選「新增資料夾」。
將新資料夾命名為“files”：
下一節
上一頁
下一頁
回目錄
14-2-4 複製暫存檔案到指定位置
再重新瀏覽
“uploadselect.php”，
重新操作一次前述上傳檔
案的步驟。這次檔案可以
成功上傳了。
這次成功了
按下「檔案」面板的「重新整理」鈕 ，點開“files”
資料夾，可以看到“20110315025820-tainan
001.jpg”檔案。
下一節
上一頁
下一頁
回目錄
14-2-5 新增記錄到資料表格
在將檔案上傳至網站後，還要將有關這次上傳檔案的相關資訊，包括原始檔名、
在伺服器上的路徑與檔名、檔案大小與格式…等資料，也都要寫到資料庫表格
“album”中，這樣網站上的檔案與資料庫的內容才會同步。
Step1:開啟“upload.php”，
再切換到程式碼模式。
將原先顯示檔案上傳成
功的地方，改為以下用
大括號括起來的一點程
式碼。
下一節
上一頁
下一頁
回目錄
14-2-5 新增記錄到資料表格
將前兩章的實例中的程式碼中，有關執行 SQL
改。
指令的部份拿來做修
因為這段程式碼最後要用 mysql_select_db 去執行 SQL語法，要用到
資料庫連結，所以才要加入下列 require_once 敘述來包含定義這個
網站資料庫連結的程式檔“dbconn_album.php”：
require_once('Connections/dbconn_album.php');
至於 SQL 語法中的表格名稱、欄位名稱、資料庫連線名稱…等，也都
做了修改。
下一節
上一頁
下一頁
回目錄
14-2-5 新增記錄到資料表格
Step2:剛才所加的程式碼了，用
到了許多次的
GetSQLValueString 函數。
GetSQLValueString 函數
並不是 PHP 的函數，而是
自定函數。
只要是在之前練習中有用到插入
記錄伺服器行為的網頁上，
都可以在程式碼最開頭地
方找得到這段定義
GetSQLValueString 函數
的程式碼。
您可以回前一章的“add.php”
以下這段程式碼：
下一節
上一頁
下一頁
回目錄
14-2-5 新增記錄到資料表格
將以上程式碼貼到“ upload.php”中，建議貼到比較前的位置，以免與後面
的程式碼擠在一起使得版面太亂不易閱讀。
上一頁
下一頁
回目錄
14-2-5 新增記錄到資料表格
將程式碼貼上
下一節
上一頁
下一頁
回目錄
14-2-5 新增記錄到資料表格
Step3:重新再做一次上傳檔案的步驟，完成後將同樣出現上傳的結果報告。只
要檔案上傳成功，就可以在資料表格中看到有一筆新的記錄加到表格中
重新上傳檔案
資料已加到表格中
下一節
上一頁
下一頁
回目錄
14-2-5 新增記錄到資料表格
這時重新整理「檔案」面板上的「files」資料夾，可以看到多了第二
個上傳檔案。
多了一個上傳檔案
不過，因為在前一小節所上傳的檔案資料沒有被加到“album”表格
中，之後無法從資料庫找到它。為了資料同步起見，讀者可以將前一
小節上傳的檔案手動刪除掉。
下一節
上一頁
下一頁
回目錄
14-2-6 檔案格式判斷
由於這個網站主要是做為網路相簿，所以照理來說上傳的檔案應該都是圖檔才
對。為了避免使用者上傳不是圖檔的檔案，要對上傳檔案的檔案類型做些檢查，
防堵掉不是圖檔的檔案。
PHP 有個 getimagesize 函數可以判斷一個檔案是不是圖檔。若給定的檔案是
個圖檔，它會回傳一個陣列回來，這個陣列有四個元素 ：
第一個元素的值是圖檔的寬（單位是pixel），
第二個元素的值是圖檔的高度，
第三個元素的值是圖檔的類型代號，比較常見的圖檔型式和它的代號分別是：
1 是 GIF，2 是 JPG，3 是 PNG，….等等。
第四個元素的值則是將圖檔的寬與高以“height="yyy" width="xxx"”型式表示
的字串，有些情況下會直接拿它來當做為 img 影像的標籤。
下一節
上一頁
下一頁
回目錄
14-2-6 檔案格式判斷
例如：若上傳一個 JPEG 圖檔 “c:\photo\flower.jpg”，它的大小是
640*480，執行下一行程式之後：
$chkImg=getimagesize(“c:\photo\flower.jpg”);
那麼 getimagesize 函數回傳的 $chkImg 陣列內容如下：
$chkImg[0]=640
$chkImg[1]=480
$chkImg[2]=2
$chkImg[3]=width="640" height="480"
不過，若上傳的檔案不是圖檔，那麼getimagesize 函數的回傳值則是
false。
Step1:同樣開啟“add.php”網頁。做上傳檔案格式的檢查，應該寫
在已經成功上傳到暫存目錄之後，但還沒接著做後續搬移到最終目錄
之前。因此，待會兒要將加入檔案格式檢查的程式碼寫在I
if(is_uploaded_file($_FILES['uploadfile']['tmp_name']))
之後的大括號中。
下一節
上一頁
下一頁
回目錄
14-2-6 檔案格式判斷
將下列幾行程式碼貼到大括號後，目的就是希望能先確認是圖檔後，再
做後續檔案搬移與寫到資料庫的作業。若不是圖檔，die 指令會中斷程
式的執行。
$chkImg=getimagesize($_FILES['uploadfile']['tmp_name']);
if (!$chkImg)
die("不是圖檔");
下一節
上一頁
下一頁
回目錄
14-2-6 檔案格式判斷
Step2: 現 在 重 新 瀏 覽
“uploadselect.php ”
網頁，來試試看如果
上傳一個 Excel 檔案，
結果會怎麼樣。
Step3:選取一個 Word 檔之
後，按下「送出」鈕
試著將檔案上傳。
下一節
上一頁
下一頁
回目錄
14-2-6 檔案格式判斷
結果，網頁上
的錯誤代碼欄
位，出現了
“不是圖檔”
的錯誤訊息。
讀者可以自行檢查，因為這個檔案並沒有上傳成功，所以在網站的“files”
資料夾下並不會有剛才選取的 Word 檔案，同時資料庫裡也不會多這一筆檔
案的記錄。
這代表了我們加了圖檔檢查的功能已經發揮功效，成功擋掉了非圖檔的上
傳。
下一節
上一頁
下一頁
回目錄
14-2-7 處理中文檔名的問題
如果讀者現在試著上傳一個中文檔名的圖檔，會出現下列的錯誤訊息：
下一節
上一頁
下一頁
回目錄
14-2-7 處理中文檔名的問題
原 因 是 UTF-8 編 碼 網 頁 無 法 在 Big5 系 統 正 確 處 理 中 文 檔 名 ， 而
move_uploaded_file 函數也不能處理 UTF-8 中文編碼。因此，需要用 iconv
函數將檔名轉成 Big5 碼。
譬如：
move_uploaded_file($_FILES['uploadfile']['tmp_name'],$ finalname)
要改為：
move_uploaded_file($_FILES['uploadfile']['tmp_name'],
iconv("utf-8", "big5", $finalname))
Step1打開upload.php程式檔。將move_uploaded_file 函數裡的第二個參數：
$Server_filename
改成為：
iconv("utf-8", "big5", $Server_filename)
下一節
上一頁
下一頁
回目錄
14-2-7 處理中文檔名的問題
下一節
上一頁
下一頁
回目錄
14-2-7 處理中文檔名的問題
Step2:重新瀏覽“uploadselect.php”網頁，試著上傳一個檔名有中文的圖檔：
這次顯示的是檔案可以上傳成功的訊息了。
下一節
上一頁
下一頁
回目錄
14-2-7 處理中文檔名的問題
Step3:重新整理檔案面板的檔案清單，可以看到這個中文名稱的檔名已經上傳
到網站的“files”目錄下。
同時“album”資料表格也加入這個檔案的記錄了。
下一節
上一頁
下一頁
回目錄
14-3 建立縮圖
由於使用者上傳的是原始大小的照片圖檔，這一節要說明如何將上傳的圖
檔自動按照它的長寬比例縮小，好方便在網頁上瀏覽縮圖。若有興趣看某
一張圖的原始大小，再點開縮圖來顯示原始大小的圖檔即可。
下一節
上一頁
下一頁
回目錄
14-3-1 縮圖的自定函數
為了日後能讓其它同樣需要產生縮圖功能的網頁也能用到這段程式碼，所以將
這整個建立縮圖的程式碼定義成一個自定函數，並獨立存成一個程式檔案。要
用到這個函數時，再將這個程式檔包含（include）進來，就可以直接引用它，
不需重寫這段相同的程式碼了。
將來源圖檔依照原圖的長寬比例複製到目的圖檔中（既然是要縮圖通常是將長
寬縮小），而在複製的時候要指定目的圖檔的寬度或寬度兩者的最大值，最後
就能依需要完成指定大小的縮圖。
先將這段程式碼完整列在以下“resize.php”檔案中。
下一節
上一頁
下一頁
回目錄
14-3-1 縮圖的自定函數
下一節
上一頁
下一頁
回目錄
14-3-1 縮圖的自定函數
下一節
上一頁
下一頁
回目錄
14-3-1 縮圖的自定函數
下一節
上一頁
下一頁
回目錄
14-3-1 縮圖的自定函數
第 2 行中定義了這個 imageResize 函數的三個參數：$srcfile 代表來源圖檔相
對於網站主目錄的相對路徑與檔名，如“files/20110313051827-001.JPG”。
$dest 則是最後產生的縮圖檔位置，同樣也是相對於網站主目錄的相對路徑與
檔名，如"thumbnail/ 20110313051827-001.JPG"。$MaxLen 則是完成後的縮
圖，其高度與寬度兩者之中的最大值。
第 7 行 getimagesize 函數在前面 14-2-6 小節要判斷上傳檔案是否是圖檔時已
有介紹過了。在這裡要取得來源圖檔的檔案類型（.gif、.jpg、.png），才能依
不同的圖檔類型將圖檔內容讀到記憶體與寫到目的圖檔。同時也要取得原圖的
寬度與高度，才能計算縮圖的寬度與高度。
第 12 行到第 22 行即是在計算目的圖檔，也就是產生出來的縮圖的寬度與高
度。例如：若給 $MaxLen 參數的值是150，如果原圖是寬度大於高度（橫拍
的照片），那麼完成的縮圖寬度是 150，高度則是按寬度縮小的相同比例去縮
小；反之，若原圖是高度大於寬度（直拍的照片），那麼完成的縮圖高度是
150，寬度則是按高度縮小的相同比例去縮小。
下一節
上一頁
下一頁
回目錄
14-3-1 縮圖的自定函數
第 25 行 imagecreatetruecolor 函數是在配置一塊記憶體的二維空間出來，第
一個參數是記憶體空間的寬度，第二個參數是記憶體空間的高度。
$destImage=imagecreatetruecolor($destW, $destH); 的敘述就可以依照剛剛
算出來目的圖檔的寬度與高度要求回傳所配置的記憶體空間位址。
imagecreatetruecolor 函數的回傳值是指向圖像的資源變數（Resource）型態，
最後指派給 $destImage 變數，用它來取得這塊指向要存放目的圖檔內容的記
憶體空間。
第 27 行到第 32 行則是視來源圖檔的格式，分別執行imagecreatefromgif、
imagecreatefromjpeg 或 imagecreatefrompng 函數，以便將來源圖檔的內容
讀到記憶體空間中。它的回傳值也是指向圖像的資源型態，最後指派給
$srcImage 變數。
第 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)
下一節
上一頁
下一頁
回目錄
14-3-1 縮圖的自定函數
第 36 行到第 42 行則是依據圖案的格式分別執行對應的函數 imagegif、imagejpeg 和
imagepng 寫出到輸出的圖檔。第一個參數是指向要輸出的影像的記憶體空間，第二個
參數是要輸出的檔案。其中imagegif 還有個可省略的第三個參數，它代表壓縮的品質
（Quality），0 表最差的品質，而 100 代表最好的品質。
其中 $dst_image 與 $src_image 分別是指向複製目的與來源圖像記憶體空間的資源型態
變數。$dst_x 與 $dst_y 分別是要複製到 $dst_image 內的某塊區域，其左上角位置的X
與 Y 座標。若兩個數值都是 0，則表示是要複製至 $dst_image 本身最左上角的位置。
$src_x 與 $src_y 則是要從 $src_image 內的某塊區域做為複製來源的區塊，其左上角位
置的 X 與 Y 座標。若兩個數值都是 0，則表示是要從來源圖像的最左上角位置開始複製
起。$dst_w 與 $dst_h 則是要複製到 $dst_image 所指向區域的寬度與高度。$src_w 與
$ src_h 則是從 $src_image 所指圖像中從左上角(X、Y座標分別是 $src_x和 $src_y)的
位置算起，複製寬度與高度各是多少的區域。因為第 34 行 $dst_x、$dst_y、$src_x 與
$src_y的值都是 0，所以將會依照我們取得的來源圖檔內容，完整複製到指定大小區域
的記憶體中，沒有截圖。只是寬度由 $src_w 變為 $dst_w，高度由 $src_h 變為 $dst_h，
完成後的圖檔大小變有可能和原始圖檔不同。Imagecopyresampled 函數本身會根據比
例將圖形的像素做適度的放大或縮小。
下一節
上一頁
下一頁
回目錄
14-3-2 運用縮圖功能
在完成了縮圖的自定函數之後，現在要將它包含在要利用這函數的 “add.php”
網頁中。
Step1:打開“add.php”。找個地方加入下列程式碼：
include ("resize.php");
加入這行敘述
利用 include 敘述將“resize.php”包含進來之後，待會就可以直接
引用“resize.php”裡的自定函數“imageResize” 了。
下一節
上一頁
下一頁
回目錄
14-3-2 運用縮圖功能
Step2:在網站的主目錄
下，建立一個專
門存放縮圖圖檔
的子目錄：
“thumbnail”。
建立放縮圖圖檔
的子目錄
Step3:現在要為縮圖指派它的存放目錄與檔名。在指派 $Server_filename 變數內容
的那一行程式碼後面，加入下列這一列程式碼：
$thumb_filename= "thumbnail/shrink-" . date("YmdHis") . "-" .
$originalfilename;
下一節
上一頁
下一頁
回目錄
14-3-2 運用縮圖功能
Step4:將下列三行程式碼加到成功執行 move_uploaded_file 函數，也就是檔
案成功上傳之後的位置：
$srcfile=iconv("utf-8", "big5", $Server_filename);
$destfile=iconv("utf-8", "big5", $thumb_filename) ;
imageResize($srcfile, $destfile, 160);
以上加入的第三列程式碼，呼叫了 imageResize 自定函數，我們就是透過它
來實際產生縮圖檔的。
下一節
上一頁
下一頁
回目錄
14-3-2 運用縮圖功能
Step5:修改產生SQL 指令的文字變數 $insertSQL 那一行敘述改為以下程式碼，讓
縮圖檔名也一起存入資料庫表格中：
$insertSQL=sprintf("INSERT INTO album (LocalName, ServName, ThumbName, FileSize
FileType, Comment) VALUES (%s, %s, %s, %s, %s, %s)",
GetSQLValueString($originalfilename , "text"),
GetSQLValueString($Server_filename, “text”),
GetSQLValueString($thumb_filename,"text"),
GetSQLValueString($_FILES['uploadfile']['size'],"text"),
GetSQLValueString($_FILES['uploadfile']['type'],"text")
GetSQLValueString($_POST['comment'], "text") );
這幾個地方都要修改
下一節
上一頁
下一頁
回目錄
14-3-2 運用縮圖功能
Step6: 現在可以儲存網頁，重新瀏覽“uploadselect.php”。
下一節
上一頁
下一頁
回目錄
14-3-2 運用縮圖功能
在「檔案」面板中可看到上傳到“files”資料夾中大小與上傳的圖檔
相同的檔案，以及產生在“thumbnail”資料夾下縮圖檔。
上傳的檔案
縮圖
再看看資料表格中，這次加入的記錄，也將縮圖檔的路徑與檔名寫入
了“ThumbName”欄位中。
下一節
上一頁
下一頁
回目錄
14-4 瀏覽相簿
在這一節我們終於要在首頁裡瀏覽相簿裡的照片了。因為要示範一次可以
顯示好幾張照片縮圖的效果，請讀者先自行上傳多張照片到網站中。記得
試著上傳些直拍與橫拍的照片，試試產生縮圖的功能在高度大於寬度與寬
度大於高度兩種情況是否都可以正常運作。
另外，因為 Dreamweaver 內建「重複區域」的資料顯示方式，資料永遠
只有用一個“欄”來顯示，N 筆資料就有 N 列。為了讓縮圖照片改以多列
且多欄的方式瀏覽，我們將以 Horizontal Looper 這個 Dreamweaver 擴充
元件來達到這個效果。
下一節
上一頁
下一頁
回目錄
14-4-1 安裝 Horizontal Looper
首先先完成 Horizontal Looper 的安裝，待會才能用它來製作多列多欄的重複
區域。
Step1:連上 Tom-Muck 的網站：
http://www.tom-muck.com/extensions/help/HorizontalLooper/
往下捲頁到最後一頁，點選
到下載的地方。注意要選
PHP 的版本，它會出現下載
檔案“HLooperMXPHP.mxp”
的對話窗。
捲到網頁的最
下方位置下載
PHP 版本程式
下一節
上一頁
下一頁
回目錄
14-4-1 安裝 Horizontal Looper
Step2:檔案“HLooperMXPHP.mxp”完成下載之後，執行這個安裝程
式檔案就可以開始安裝擴充元件。出現以下畫面時按「接受」。
下一節
上一頁
下一頁
回目錄
14-4-1 安裝 Horizontal Looper
Step3:按照指示完成安裝後，就會在 Dreamweaver 的擴充元件管
理視窗中看到 Horizontal Looper 已經安裝完成。
如果剛剛在安裝Horizontal Looper時沒有先將 Dreamweaver 關掉，
那麼現在必須先將 Dreamweaver 關閉再重新啟動才能使用
Horizontal Looper 這個新加入的擴充元件。
安裝好了
下一節
上一頁
下一頁
回目錄
14-4-1 安裝 Horizontal Looper
若之後要將擴充元件移除，只要在 Dreamweaver 執行「命令」／
「管理擴充功能」，就可以再度開啟擴充元件管理視窗。
在要移除的擴充元件上按下滑鼠，就會出現「移除」鈕。
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
接著就要製作可以瀏覽相簿中所
有照片縮圖的首頁了。
Step1：打開首頁“index.php”網
頁。
Step2：首先建立資料集
rs_album，它的定義如下：
建立資料集
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
Step3:從「繫結」面板將資料集
的欄位拖曳到表格的欄位
中，做為欄位的資料來源，
並將每個欄位的對齊方式
設為置中。完成的畫面如
下：
設定欄位的資料
來源
Step4:選取網頁中 {rs_album.ThumbName} 的地方，再切換到程式碼模式。
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
$row_rs_album['ThumbName'] 是相片縮圖的存放路徑與檔名，現
在要將它變成為放在 img影像物件的src（圖檔來源位置）標籤值。
將 <?php echo $row_rs_album['ThumbName']; ?> 改為下列程式碼：
<img src="<?php echo $row_rs_album['ThumbName']; ?>" />
例如，當要顯示的照片縮圖檔位置是在：
“thumbnail/20110317020037-cheesecake-10.jpg”時，那麼所產
生的HTML 碼便是：
<img src=" thumbnail/20110317020037-cheesecake-10.jpg " />
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
Step5:再來改檔案大小的部份。因為在資料庫裡儲存的“FileSize”資
料欄位所用的單位是位元組（Byte），現在要將它除以 1024，
單位則改用“K ”（1024 Bytes）來表示。
將下列這行程式碼：
<?php echo $row_rs_album[FileSize]; ?>
改為以下這一行程式碼：
<?php echo Round($row_rs_album['FileSize']/1024,0) . "K"; ?>
至於用 Round(N,0) 函數則是將 N 值取四捨五入到整數位數。
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
Step6:接下來是重頭戲了。現在您瀏覽這個網頁，只會看到第一張
照片的縮圖，那是因為還沒有設好「重複區域」。現在就要
靠剛才安裝好的 Horizontal Looper 了。
這個網頁的表格其實有兩層：外層的表格框住整個相簿，內層的表
格則是一張照片的資料範圍。和設定重複區域時一樣，要先
選取要重複顯示資料的表格區域。
選取整個內層表格，再從「伺服器行為」面板中執行「DW Team」
下的「Horizontal Looper MX」，這也是 Horizontal Looper
安裝好之後所加入的執行路徑。
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
選取內層表格
在設定 Horizontal Looper 屬性的視窗
中，將資料集設為 rs_album，顯示方
式則設為 2 列 * 5 欄：
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
Step7:最後，為了讓使用者在瀏覽相簿時可以跳頁，還要加上內建
的資料集導覽列按鈕。
將插入點移到表格的最後一列中，然後從選單中執行「插入」／
「資料物件」／「資料集（Recordset）分頁」／「資料集
導覽列按鈕」，在設定的視窗中將資料集設為 rs_album。
插入點移到這裡
加入資料集導覽列按鈕之
後可以將它選取，再將對
齊方式設為置中。完成後
的畫面如下：
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
Step8:。現在，終於可以瀏覽期待已久的相簿首頁畫面了。
下一節
上一頁
下一頁
回目錄
14-4-2 瀏覽照片縮圖清單
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
由於目前首頁只有顯示縮圖，現在要再加上檢視照片原圖的功能。當使用
者點下某一張縮圖，就可以開啟另一個網頁來顯示這張照片原本大小的影
像。
Step1:首先在“index.php”網頁中選取縮圖的影像物件，要先為它設連結。
嚐試改變一下作法，直接用修改程式碼的方式。
切換到程式碼模式，找到剛才設的顯示縮圖的 <img…. /> 標籤：
<img src="<?php echo $row_rs_album['ThumbName']; ?>" />
將上面的 img 標籤改為以下寫法：
<a href="display.php?ID=<?php echo $row_rs_album['ID']; ?>">
<img src="<?php echo $row_rs_album['ThumbName']; ?>" /> </a>
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
上面將 img 標籤包圍在用 <a > 與 </a> 定義的超連結範圍之中，這
樣設的目的是當點下某張影像時，就會連到這張影像所對應的連結網
址。
超連結的目標網址則是用 href 這個標籤屬性來定義的。像是：
href="display.php?ID=4" 就是代表傳遞參數 ID=4 的值到另一個網頁
“display.php”。
Step2:接下來要來設定顯示原圖的“display.php”網頁。先開啟
“display.php”網頁。
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
Step3:建立資料集 rs_photo，定義如下圖所示。注意它的篩選條件是照
片代號（ID）欄位和傳過來 URL 參數 ID 的值相同的照片資料記
錄。這樣正常情況下所篩選出來的資料集只會剛好有一筆記錄，
也就是要從“album”表格中找出 ID 欄位的值與從“index.php”
所傳過來的URL參數 ID 相同的那一筆照片資料記錄。
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
Step4:將表格中欄位的資料來源設為資料集的欄位，並將欄位的對齊方式都
設為置中。設好的畫面如下：
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
Step5:將切換到程式碼模式，同樣要修改幾個欄位的標籤。
將第一列顯示原圖影像的標籤：
<?php echo $row_rs_photo['ServName']; ?>
改為：
<img src="<?php echo $row_rs_photo['ServName']; ?>"/>
將第三列顯示原圖檔案大小的標籤：
<?php echo $row_rs_photo['FileSize']; ?>
同樣改為以“K”表示：
<?php echo Round($row_rs_photo[‘FileSize’]/1024,0) . “K”; ?>
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
Step6:現在儲存剛剛變更到的所有網頁，再重新瀏覽“index.php”網頁。
在相簿裡點下任一張照片的縮圖，左下角的網址列就會顯示它將連
結到 “display.php”，後面並且帶著那張照片的 ID。
按下滑鼠後可以就會開啟 “display.php” 網頁，顯示照片的原始大小。
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
點下一張照
片縮圖
連結的網址與參數
下一節
上一頁
下一頁
回目錄
14-5 檢視照片原圖
顯示照片原
本的大小
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
許多網站都提供下載檔案的功能，讓使用者可以從網站上取得檔案，並存
在自己的電腦中。由於使用者上傳的檔案名稱可能含有中文，在處理時必
須再用 iconv 函數將檔名轉碼。
檔名裡有中文字元
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
檔名裡有中文字元
從這個相簿下載檔案的大致流程是：要從首頁點選要下載圖檔的照片，然
後將照片圖檔路徑與原始的檔名這兩個參數傳給另一個網頁來處理檔案下
載。
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
首先，先製作下載檔案的“download.php”網頁。在“download.php”
網頁輸入下列程式碼：
程式說明：
第 2行和第 3 行都用了 iconv 函數，
將從首頁傳過來的網址參數列中，
ServName 和 LocalName 這兩個
參數的值都轉碼為 BIG5碼，否則
瀏覽器會認不得中文的部份。
第 4行利用 file_exists 函數先檢查
放在網站中的原始圖檔是否還存
在。雖然前面我們已經將圖檔上
傳成功，但難保證在這段期間是
否發生檔案被系統管理者手動清
除，或是其它情況以致於檔案已
無法供使用者下載。
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
第 9 行到第 11 行使用 header 函數來傳送 HTTP 的檔頭，它們在
定義與這次下傳檔案有關的設定，包括傳輸資料的格式。其中
“Content-Disposition”後面是在定義下載視窗中預設顯示的儲存
檔案名稱。而這個儲存時所要顯示的預設檔案名稱，是用
$LocalName變數的值，也就是來自第3行的 $_GET['LocalName']，
即由URL網址中取得參數LocalName的值，這樣我們就可以利用這
個機會帶出使用者上傳時原本使用的檔案名稱了。
第 12 行呼叫的 readfile 函數會開啟參數裡的檔案並輸出到輸出的
緩衝區（Output Buffer）。當使用者在儲存對話窗中（Save
Dialogue）中確定好儲存的路徑與檔名要開始儲存時，才會將緩衝
區的內容正式下載。
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
接著要在首頁裡設下載檔案的超連結。
Step1：打開“index.php”網頁。選取“下載”文字，準備為它加上超連
結。
選取文字
Step2：切換到程式碼，將它改用以下程式碼取代：
<a href="download.php?ServName=<?php echo
$row_rs_album['ServName']; ?>&amp;LocalName=<?php echo
$row_rs_album['LocalName']; ?>">下載</a>
其中“&amp;”代表用來連接多個參數設定值的“&”代號 。如果您不想
編寫上面這個超連結，也可以在「屬性」面板中設連結，將連結的目標網
頁設為“download.php”，至於參數的設定則參考以下畫面：
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
要帶兩個參數
這次要傳遞的參數有兩個，其中 ServName 是要下載的網站檔案
來源，而LocalName 則是檔案原始的檔名，兩者的內容都可以從
資 料 集 中 取 得 。 還 記 得 “ download.php ” 裡 會 用
$_GET['ServName'] 和 $_GET['LocalName'] 來取得這兩個參
數的值嗎？有了這兩個檔名才能順利完成檔案的下載。
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
Step3:現在重新瀏覽“index.php“網頁，在相簿裡找個當初上傳的原始檔
名中有含中文的照片，試試下載含中文的檔名是否也可以正常運作。
將游標移到“下載“的上方，可以留意左下角的網址列顯示的連結網址帶
了兩個內容是檔名的參數。注意參數中的中文顯示是否正常。
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
Step4:按下“下載“超連結後，就會出現下列這個熟悉
的檔案下載的儲存對話窗：
預設的儲存檔名
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
Step5:再按「儲存」鈕，就會現「另存新檔」視窗。這裡顯示的檔案名
稱是在“download.php”程式讓它帶出來的預設儲存檔名，仍
然可以修改成別的檔名或指定儲存目錄，最後再按「存檔」鈕
儲存。
還是可以從這
裡改檔名
下一節
上一頁
下一頁
回目錄
14-6 下載檔案
Step6:當下載完成之後，可以到檔案總管確認是否順利存回原本的
中文檔名。
存回原本的
中文檔名
下一節
上一頁
下一頁
回目錄
14-7 刪除已上傳檔案
若要刪除已經上傳到相簿的照片，有三個地方的檔案或資料要一併刪
除：在“files”目錄下的原始圖檔， “thumbnail”目錄下的縮圖檔，
以及在“album”資料表格裡的記錄。這樣資料與檔案才會同步更新。
至於要調整的網頁則有兩個，一個是首頁，要在它上面加設刪除照片
的連結；另一個則是處理刪除記錄與檔案的“delete.php”網頁。
Step1:打開“index.php”網頁。選取“刪除”文字，準備為它加上超
連結。
上一節
上一頁
下一頁
回目錄
14-7 刪除已上傳檔案
Step2:這次要連結的網頁是“delete.php”，要加的參數總共有三個，分
別是 ID、ServName、ThumbName。
設定完成的程式碼如下：
<a href="delete.php?ID=<?php echo $row_rs_album['ID'];
?>&amp;ServName=<?php echo $row_rs_album['ServName'];
?>&amp;ThumbName=<?php echo
$row_rs_album['ThumbName']; ?>">刪除</a>
上一節
上一頁
下一頁
回目錄
14-7 刪除已上傳檔案
Step3:打開“delete.php”網
頁，在「伺服器行為」
面板中執 行 「 刪 除 記
錄」。 依 照畫 面設定
這個「 刪 除記 錄 」的
伺服器行為：
Step4:切換到程式碼模式。將
插 入 點 移 到 執 行
mysql_query 指 令 刪
除表格資 料記 錄的地
方之後。
上一節
上一頁
下一頁
回目錄
14-7
刪除已上傳檔案
加入以下幾行程式碼：
// 刪除檔案
$ServName=iconv("utf-8", "big5", $_GET['ServName']);
if(file_exists($ServName))
unlink($ServName);
$ThumbName=iconv("utf-8", "big5", $_GET['ThumbName']);
if(file_exists($ThumbName))
unlink($ThumbName);
加入這幾行
程式碼
上一節
上一頁
下一頁
回目錄
14-7 刪除已上傳檔案
Step5:最後，再重新瀏覽相簿。按下一張照片的「刪除」連結。
這個位置原來
的照片已刪除
了
按下刪除連結
上一節
上一頁
下一頁
回目錄
14-7 刪除已上傳檔案
回資料表檢查一下該張照片的記錄是否已刪除了。
上一節
上一頁
下一頁
回目錄
14-7 刪除已上傳檔案
另外，該張照片在“files”資料夾下的原圖檔與“thumbnail”資料夾
下的縮圖檔也會一併刪除。
縮圖檔也刪除了
原來的圖
檔刪除了
上一節
上一頁
回目錄