【Dreamweaver 8 & PHP 網頁資料庫】:: 試閱章節 14-2-1 建立與讀取表單變數陣列

【Dreamweaver 8 & PHP 網頁資料庫】:: 試閱章節 13-2 檔案上傳、錯誤判斷

Chapter 14 相簿  範例展示

學習重點:

  • 1.多筆記錄動作的處理 在相簿範例中, 首先便是學習解決一個常見的問題, 在頁面上有多組欄位要一次插入多筆】記錄時該怎麼辦?, 在【14-2節 多欄位表單元件的問題與處理】中我們會探討到如何製作的頁面, 並且該如何利用Dreamweaver搭配手動修改程式碼來解決這種處理多筆記錄的動作。
  • 2.動態新增欄位 遇到多張圖片上傳, 我們沒有辦法判定使用者他一次想上傳幾張圖片, 所以我們會用一些技巧做到動態新增檔案欄位的效果。
  • 3.檔案格式判斷 在檔案上傳部分我們將會做檔案格式的判斷。
  • 4.自訂函示、GD函示庫 最重要的當然是自訂函示使用與GD函示庫的應用, GD函示庫是PHP中的額外擴充函示庫, 廣泛的被用來處理圖形, 你可以在這邊瞭解PHP中, 若要處理圖片製作縮圖應該經過哪些步驟, 以及如何實現。

14-2 多欄位表單元件的問題與處理
  [14-2-1 建立與讀取表單變數陣列]
 [14-2-2 動態增加檔案欄位]
  [14-2-3 插入多筆記錄的處理]
  [14-2-4 空白檔案欄位處理]

14-2 多欄位表單元件的問題與處理

  在相簿的範例中,我們在上傳圖片時總不會要求使用者一次僅上傳一張圖片吧,在一開始我們先來看看當表單中,需要放上多個代表著相同資訊的表單元件時,該如何搭配Dreamweaver與處理背後的PHP程式碼。

[建立與讀取表單變數陣列]

  在初學摸索的階段,我們可能會嘗試將欄位直接複製貼上於頁面中,但這樣會發生什麼事呢?

【開啟範例檔案】 — upload.php

  在upload.php中直接看到檔案欄位的名稱,它被命名為Photo,不用急著將它複製貼上。


圖 14-2-01

  於程式碼檢視模式,我們找到如圖17至24列中代表者檔案欄位說明文字欄位的兩列儲存格HTML碼,我們在上下使用for迴圈來重複這個區域。


圖 14-2-02

  對照上圖,我們加上的程式碼分別為16與 25兩列的:

16  <?php for( $i=0 ; $i<$Num ; $i++) { ?>

25  <?php } ?>

  如此一來在表格中的這兩列(檔案欄位、說明文字欄位)便會被重複五次,直接加迴圈的目的是這部分之後還會使用到,而這樣的效果與我們在頁面中自己重複新插入8列儲存格、並複製貼上相同名稱的檔案欄位與文字欄位效果是相同的。

  接著在頁面最上方建立一個迴圈範圍,輸出$_FILES[‘Photo’][‘name’]資訊,詳細的檔案上傳介紹在第13章,相信各位現在都很清楚這是用來輸出使用者上傳的檔案名稱。


圖 14-2-03

  最後選取表單,於屬性列中的『動作』目標設至自己upload.php,『編碼』還是使用預設的multipart/form-data。


圖 14-2-04

  這樣子就可以一次上傳5個檔案嗎?答案是肯定的,肯定不行,我們使用瀏覽器開啟upload.php,分別選取五個不同的檔案然後按下送出


圖 14-2-05

  接著我們只會看到最後一個檔案名稱被重複了五次輸出,我們可以想像在按下送出的時候,表單變數Photo被重新定義了五次,當然所上傳的檔案也僅會是最後一個,那該將每個檔案欄位依序命名為Photo1、Photo2嗎?雖然可以,但是不方便處理,我們應該使用的是陣列。


圖 14-2-06

  那該如何以陣列的方式命名表單元件名稱呢?前面我們學過陣列的名稱是像Photo[索引],所以應該於頁面上直接加上所需要的元件個數,然後依序命名為Photo[1]、Photo[2]?

【開啟範例檔案】 — upload.php

Step1.  不用的,回到upload.php中,我們分別將頁面中的檔案欄位說明文字欄位的名稱於後方加上中括弧 [ ]


圖 14-2-07


圖 14-2-08

Tips

當表單元件以這樣的方式被命名之後,便會被以陣列的型態來表示,索引值將依序由0開始向上遞增。

Step2.  在大部分的場合中,我們可能沒辦法預料表單中重複的元件個數,例如在這個範例中將允許使用者一次上傳5個或以上的檔案,這時候有一個處理的辦法,於頁面上方將程式碼改寫如下。


圖 14-2-09

1 <?php
2   $countNum=count($_POST[‘Comment’]);
3  for( $i=0;$i<$countNum ; $i++){
4   echo "上傳名稱:" . $_FILES[‘Photo’][‘name’][$i]. "<br>";
5   }
6  ?>

  見到了新函示count(),count可以用來計算陣列變數中的元素總個數,因此在頁面中出現了幾次的說明文字欄位,$countNum的值就會等於多少,這樣子我們就可以判定當使用者按下送出時,頁面上有幾組欄位了。

  接著我們用for迴圈,將$_FILES[‘Photo’][‘name’][$i]的資訊輸出,其中$i即為由0起始索引,終止為$countNum,這樣子我們便達到頁面中有幾組欄位,迴圈便跑幾次的效果。

  重新開啟瀏覽器檢視upload.php,我們在檔案欄位中隨意按下瀏覽指定幾個檔案後按下送出


圖 14-2-10

  這時後你應該可以在腦海中浮現$_FILES[‘Photo’][‘name’][0]至$_FILES[‘Photo’][‘name’][4]這5個變數會被輸出,而當然這時候我們可以依據網頁輸出的結果判定個別的檔案都會被上傳。


圖 14-2-11

在〈【Dreamweaver 8 & PHP 網頁資料庫】:: 試閱章節 14-2-1 建立與讀取表單變數陣列〉中有 27 則留言

  1. Photo 資料夾於 Windows 平台測試 ok
    為什麼在 Linux 平台上傳圖片總是原圖大小
    (我有指定縮圖,並設定 px)
    無法做縮圖程序,且於 thum 資料夾無產生圖片
    mysql 也未寫入,不知為什麼?
    請 cttlee 老師幫忙解疑惑?!!
    謝謝
    正在趕 Case 滿臉全豆花的無頭蒼蠅敬上:twisted:

  2. 目前發生了一個問題…目前正在做搜尋網頁…但是不知道如何
    dowmload檔案…
    例如:輸入關鍵搜尋後,會出現1.日期,2.標題,3.作者,4.下戴文章
    資料庫連結OK..前3項順利出現,但是4.下戴文章不知道該如何設定
    才好,我的文章是放在資料夾中,依據標題搜尋結果讓user下戴,看書
    上面是寫可以屬性->連結->檔案名稱?參數設定?
    請問該如何設定?
    找書看了很久~可以幫我看問題出在哪嗎?感激不盡~
    你的網站很不錯唷~內容詳細還有圖解~

  3. 書上(14-2頁)說會使用到一個extension名為horizontal looper mx說到這下載,但找了老半天就找不到在那!!請大大指點一下吧!!:shock:

  4. 我要將bmp的圖檔做縮圖,在resize.php與upload.php中新增了bmp檔案格式,但是在做縮圖時仍顯示出無效的參數,有什麼方法可以決解嗎

  5. 我有支持大大您喔,我都有再買您的書
    請問更新的語法問題
    在編輯的地方
    我修改了這些
    if(!isset($_GET[‘Num’]))
    $Num=1;
    else
    $Num=$_GET[‘Num’];

    $updateSQL = sprintf(“UPDATE work_category3 SET wc_name3=%s, wc_img3=%s, wc_img3_thumb=%s WHERE wc_id3=$id3”,
    GetSQLValueString($_POST[‘wc_name3’], “text”),
    GetSQLValueString($img1, “text”),
    GetSQLValueString($img2, “text”));

    但是如果我要更新圖片名稱的話都不能變
    如果要改的話必須連圖片都重新上傳才能編輯圖片名稱
    要怎麼不用重新上傳圖片讓圖片名稱這個欄位就能直接更新呢?

  6. 小文 :
    七月 30th, 2008 at 14:43
    我要將bmp的圖檔做縮圖,在resize.php與upload.php中新增了bmp檔案格式,但是在做縮圖時仍顯示出無效的參數,有什麼方法可以決解嗎
    —————————————————————
    我將程式做以下的修正,沒有出現任何錯誤訊息
    1.觀察sql中有寫入圖片檔案,但沒有副檔名
    2.至上傳資料夾中查看原圖有上傳,但沒有製作出縮圖
    以下是我修改的部份:
    resize.php
    //根據檔案格式讀取圖檔
    switch ($srcExtension) {
    case 1: $srcImage = imagecreatefromgif($src); break;
    case 2: $srcImage = imagecreatefromjpeg($src); break;
    case 3: $srcImage = imagecreatefrompng($src); break;
    case 4: $srcImage = imagecreatefrombmp($src); break;
    }

    upload.php
    //指定副檔名
    switch($checkExt[2]){
    case 1 : $Ext = “gif”; break;
    case 2 : $Ext = “jpg”; break;
    case 3 : $Ext = “png”; break;
    case 4 : $Ext = “bmp”; break;
    }

  7. 資料的圖片沒有更新
    而是要更新其它欄位
    如果要修改其它欄位的話
    會無法修改
    如果要修改就必須重新上傳圖片才行

  8. 請問我在看了您的書之後
    並沒有教如何刪除圖片檔案
    請問圖片檔案是要怎麼刪除呢

    if ((isset($_POST[‘ei_id’])) && ($_POST[‘ei_id’] != “”)) {
    $COUNT = COUNT($_POST[‘ei_id’]);
    for($a=0; $a < $COUNT; $a++){
    $ei_id = $_POST[‘ei_id’][$a];
    $deleteSQL = sprintf(“DELETE FROM ebook_img WHERE ei_id=$ei_id”,
    GetSQLValueString($ei_id, “int”));

    mysql_select_db($database_cn, $cn);
    $Result1 = mysql_query($deleteSQL, $cn) or die(mysql_error());

    這樣只能刪除資料庫當中的資料

    if ((isset($_POST[‘ServerFilename’])) && ($_POST[‘ServerFilename’] != “”)) {
    $COUNT1 = COUNT($_POST[‘ServerFilename’]);
    for($b=0; $b < $COUNT1; $b++){
    $sn = $_POST[‘ServerFilename’][$b];
    //$bookdirectoryname=$_POST[‘bookdirectoryname’];

    $Filename=”../upload/4181016/thum/” . $sn;
    if(file_exists($Filename))
    unlink($Filename);

    }

    這樣會將所以圖片都刪除

  9. 你可以先將unlink註解起來
    然後印出$Filename變數除錯
    $sn = $_POST[‘ServerFilename’][$b];會取得所有的檔案名稱
    所以才會被全部刪除
    你應該只去取得被核取的檔案名稱

  10. $_POST[‘ei_id’]
    <input name=”ei_id[]” type=”checkbox” id=”ei_id[]” value=”” />

    <input name=”ServerFilename[]” type=”hidden” id=”ServerFilename[]” value=”” />

    我就是這樣做的
    可是就是會刪除掉所有的圖片

  11. 核取方塊del_file存檔名
    這樣應該就差不多了吧

    if ((isset($_POST[‘ei_id’])) && ($_POST[‘ei_id’] != “”)) {
    $COUNT = COUNT($_POST[‘ei_id’]);
    for($a=0; $a < $COUNT; $a++){ $ei_id = $_POST['ei_id'][$a]; $deleteSQL = sprintf(”DELETE FROM ebook_img WHERE ei_id=$ei_id”, GetSQLValueString($ei_id, “int”)); mysql_select_db($database_cn, $cn); $Result1 = mysql_query($deleteSQL, $cn) or die(mysql_error()); } } foreach($_POST['del_file'] as $key => $val){
    $sn = $val;
    $Filename=”../upload/4181016/thum/” . $sn;
    if(file_exists($Filename))
    unlink($Filename);
    }

  12. 謝謝!!
    在請問另外一個問題
    就是如果編輯的話
    要更換該張圖片
    如果要是使用者沒有上傳圖片的話該圖片欄位要怎麼保持原本的圖片名稱?

  13. 老師人你好
    你的書很具參考價值,CS3,CS4我都有買~獲益良多
    關於多欄位表單元件的問題與處理這部份
    如果在原先的欄位已經有填上資料,但是在點擊新增檔案欄位後,原先的欄位上的資料都會被清空,這部份該如何處理(不要寫到資料庫)

留言