Title1

Title2

Title3

prev15-1 檔案上傳
16. 套用至前台輪播圖next
網站程式設計-PHP

15-2 樣板增加「上傳表單」

  1. 在 form 加入(重要) 
     enctype="multipart/form-data"

     

  2. 在表單裡加入 
                  <div class="form-group">
                <label>上傳圖片</label>
                <input name='file' type="file" id="file" class="form-control" accept="image/*" >
              </div>

    因為有「 accept="image/*」所以使用者預設只能看到圖片，不過仍可以切換至「所有檔案」上傳其他類型檔案

  3. 在 op_insert 增加
    在「$sn=$mysqli->insert_id;//傳回insert 指令所產生之流水號」的後面加入，因為有流水號，才有辦法關連 
      /*
  $_FILES['file']['name']：上傳檔案原始名稱。
  $_FILES['file']['type']：檔案的 MIME 類型，例如“image/gif”。
  $_FILES['file']['size']：已上傳檔案的大小，單位為bytes。
  $_FILES['file']['tmp_name']：檔案被上傳後的臨時檔案名。
  $_FILES['file']['error']：和該檔案上傳相關的錯誤代碼。
   */
  if($_FILES['file'] and !$_FILES['file']['error'])
  {
    $col_name=$_POST['kind'];//輪播圖的關鍵字 slider_home
    $col_sn=$sn;//相關流水號
    $sort=1;//排序
    $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);//取得副檔名
    $ext = strtolower($ext); //轉小寫
    $sub_dir="/slider";//儲存位置
    $file_name="slider_".$col_sn."_".$sort.".".$ext;//檔名

    if($ext == "png" or $ext == "gif" or $ext == "jpg" or $ext == "jpeg" or $ext == "jpe")
    {
      $kind="img";
    }else
    {
      $kind="file";
    }
    #寫入資料表 show_files
    $sql = "insert into `show_files`
            (`col_name`, `col_sn`, `sort`, `kind`,`file_name`,`file_type`,`file_size`,`description`,`sub_dir`)
            VALUES
            ('{$col_name}', '{$col_sn}', '{$sort}', '{$kind}', '{$file_name}', '{$_FILES['file']['type']}','{$_FILES['file']['size']}', '{$_POST['title']}', '{$sub_dir}')";
    $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));
    $new_file= WEB_PATH."/uploads".$sub_dir."/".$file_name;
    #移動檔案
    move_uploaded_file($_FILES['file']['tmp_name'] , $new_file);
  }

     

  4. 調整顯示單筆
    op_show 函數 
      #取得圖片src
  $DBV['file_name'] = get_file_name_src($DBV['sn'],$TBL['kind']);
    取得圖片src 函數 
    ########################################
# #取得圖片src
########################################
function get_file_name_src($col_sn,$col_name)
{
  global $mysqli;
  if(!$col_sn or !$col_name)return;

  #這裡可以再寫成函數 取得圖片檔資料
  $sql = "select *
          from `show_files`
          where `col_sn`='{$col_sn}' and `col_name`='{$col_name}'
          order by sort";
  $result = $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));
  $row = $result->fetch_assoc();
  #----------------

  #圖片檔src
  $file_name = WEB_URL."/uploads".$row['sub_dir']."/".$row['file_name'];

  return  $file_name;
}

    樣版(注意 class="img-responsive") 
                  <div class="row">
                <div class="col-md-9">
                  <div class="form-group">
                    <label>網址</label>
                    <div class="form-control">{$DBV['url']}</div>
                  </div>
                </div>
                {if $DBV.file_name}
                  <div class="col-md-3">
                    <img src="{$DBV['file_name']}" alt="{$DBV.title}" class="img-responsive">
                  </div>
                {/if}
              </div>
  5. 調整編輯
    get_show_kind($sn) 函數  (取得單筆記錄) 
      #取得圖片src
  $DBV['file_name'] = get_file_name_src($DBV['sn'],$TBL['kind']);
    op_form($sn) 函數 
      #圖片src
  $DBV['file_name'] = (isset($DBV['file_name']))   ? $DBV['file_name']   : "";
    op_form 樣板 
                  <div class="row">
                <div class="col-md-9">
                  <div class="form-group">
                    <label>上傳圖片</label>
                    <input name='file' type="file" id="file" class="form-control" accept="image/*" >
                  </div>
                </div>

                {if $DBV.file_name}
                  <div class="col-md-3">
                    <img src="{$DBV['file_name']}" alt="{$DBV.title}" class="img-responsive">
                  </div>
                {/if}
              </div>

    把  get_file_name_src($col_sn,$col_name)  拆成二個函數 
    ########################################
# #取得圖片src
########################################
function get_file_name_src($col_sn,$col_name)
{
  global $mysqli;
  if(!$col_sn or !$col_name)return;

  #這裡可以再寫成函數 取得圖片檔資料
  $sql = "select *
          from `show_files`
          where `col_sn`='{$col_sn}' and `col_name`='{$col_name}'
          order by sort";
  $result = $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));
  $row = $result->fetch_assoc();
  #----------------

  #圖片檔src
  $file_name = WEB_URL."/uploads".$row['sub_dir']."/".$row['file_name'];

  return  $file_name;
}
    ＝＞ 
    ########################################
# #取得圖片
########################################
function get_file_name($col_sn,$col_name)
{
  global $mysqli;
  if(!$col_sn or !$col_name)return;
  #
  $sql = "select *
          from `show_files`
          where `col_sn`='{$col_sn}' and `col_name`='{$col_name}'
          order by sort";
  $result = $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));
  $row = $result->fetch_assoc();
  #----------------
  return  $row;
}
########################################
# #取得圖片src
########################################
function get_file_name_src($col_sn,$col_name)
{
  if(!$col_sn or !$col_name)return;

  $row = get_file_name($col_sn,$col_name);
  #----------------

  #圖片檔src
  $file_name = $row['file_name'] ? WEB_URL."/uploads".$row['sub_dir']."/".$row['file_name']:"";

  return  $file_name;
}

    op_update($sn="")  函數，這裡是先刪除再新增，所以會有快取的問題，必須使用「$smarty->clearAllCache();」清快取 
      /*
  $_FILES['file']['name']：上傳檔案原始名稱。
  $_FILES['file']['type']：檔案的 MIME 類型，例如“image/gif”。
  $_FILES['file']['size']：已上傳檔案的大小，單位為bytes。
  $_FILES['file']['tmp_name']：檔案被上傳後的臨時檔案名。
  $_FILES['file']['error']：和該檔案上傳相關的錯誤代碼。
   */
  if($_FILES['file'] and !$_FILES['file']['error'])
  {
    #刪除舊檔(資料表、實體檔案)
    delete_file_name($sn,$TBL['kind']);
    #-----------------------

    $col_name=$TBL['kind'];//輪播圖的關鍵字 slider_home
    $col_sn=$sn;//相關流水號
    $sort=1;//排序
    $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);//取得副檔名
    $ext = strtolower($ext); //轉小寫
    $sub_dir="/slider";//儲存位置
    $file_name="slider_".$col_sn."_".$sort.".".$ext;//檔名

    if($ext == "png" or $ext == "gif" or $ext == "jpg" or $ext == "jpeg" or $ext == "jpe")
    {
      $kind="img";
    }else
    {
      $kind="file";
    }
    #寫入資料表 show_files
    $sql = "insert into `show_files`
            (`col_name`, `col_sn`, `sort`, `kind`,`file_name`,`file_type`,`file_size`,`description`,`sub_dir`)
            VALUES
            ('{$col_name}', '{$col_sn}', '{$sort}', '{$kind}', '{$file_name}', '{$_FILES['file']['type']}','{$_FILES['file']['size']}', '{$_POST['title']}', '{$sub_dir}')";
    $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));
    $new_file= WEB_PATH."/uploads".$sub_dir."/".$file_name;
    #移動檔案
    move_uploaded_file($_FILES['file']['tmp_name'] , $new_file);
  }

    delete_file_name($col_sn,$col_name) 函數 
    ########################################
# 刪除圖片
########################################
function delete_file_name($col_sn,$col_name)
{
  global $mysqli;
  if(!$col_sn or !$col_name)return;
  #取得資料
  $row = get_file_name($col_sn,$col_name);

  if($row){
    #1. 刪除實體檔案
    unlink(WEB_PATH."/uploads".$row['sub_dir']."/".$row['file_name']);
    #2. 刪除「show_files」記錄
    $sql = "delete
            from `show_files`
            where `sn`='{$row['sn']}'";//die($sql);
    $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));
  }
  return true;
}
    流程 
    
  #更新記錄
  case "op_update":
    $sn=op_update($sn);

    #刪除快取
    $smarty->clearAllCache();
    redirect_header("{$WEB['file_name']}?op=op_show&sn={$sn}",3000,"更新資料成功！！");
    exit;
  break;
  6. 刪除
    op_delete($sn="")　函數 
    
###############################################################################
#  刪除資料
###############################################################################
function op_delete($sn="")
{
  global $mysqli,$TBL;
  if(!$sn)redirect_header("index.php",3000,"刪除記錄錯誤！！");

  #刪除舊檔(資料表、實體檔案)
  delete_file_name($sn,$TBL['kind']);

  #刪除 show_kind
  $sql = "delete
          from `{$TBL['name']}`
          where `sn`='{$sn}'";//die($sql);
  $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));

  return;
}
  7. 增加列表縮圖
    程式： op_list
    這裡借用前面建立好的取得圖片 src的函數
    function get_file_name_src($row['sn'],$col_name)
    第30行，其實可以把他移到 迴圈外面，因為它的值是固定的。 
    ########################################
# 列表
########################################
function op_list()
{
  global $mysqli,$smarty,$TBL;

  #取得所有記錄
  $sql = "select *
          from `{$TBL['name']}`
          where `kind`='{$TBL['kind']}'
          order by `sort` ";//die($sql);
  $result = $mysqli->query($sql) or die(printf("Error: %s <br>".$sql, $mysqli->sqlstate));


  $rows=array();

  while($row = $result->fetch_assoc())
  {
    #過濾撈出資料
    $row['sn'] = intval($row['sn']);
    //http://www.w3school.com.cn/php/func_string_htmlspecialchars.asp
    $row['title'] = htmlspecialchars($row['title'], ENT_QUOTES); // 轉換雙引號和單引號
    $row['url'] = htmlspecialchars($row['url'], ENT_QUOTES); // 轉換雙引號和單引號
    $row['sort'] = intval($row['sort']);
    $row['enable'] = $row['enable'] ? "是":"<span style='color:red;'>否</span>";
    $row['target'] = $row['target'] ? "是":"<span style='color:red;'>否</span>";

    #取得圖片src
    $col_name = "slider_home";
    $row['file_name'] = get_file_name_src($row['sn'],$col_name);

    $rows[]= $row;
  }

  $smarty->assign("DBV", $rows);
  return;
}

    樣板：增加一欄，寬度為1，原網址寬度改為3，有可能程式並沒有傳 file_name過來，所以判斷是否有值，如果有才顯示圖片 
    
   {* 選單管理 列表 *}
   {if $WEB.file_name == "slider.php" and $op == "op_list"}
     {literal}
       <link rel="stylesheet" href="../class/sweet-alert/sweet-alert.css" type="text/css" />
       <script src="../class/sweet-alert/sweet-alert.js" type="text/javascript"></script>
       <script type="text/javascript">
         function op_delete_js(sn){
           swal({
             title: '確定要刪除此資料？',
             text: '相關資料通通都將會被移除！',
             type: 'warning',
             showCancelButton: 1,
             confirmButtonColor: '#DD6B55',
             confirmButtonText: '確定刪除！',
             closeOnConfirm: false ,
             allowOutsideClick: true
           },
           function(){
             location.href='slider.php?op=op_delete&sn=' + sn;
           });
         }
       </script>
     {/literal}
     <div class="container" style="margin-top:20px;">
       <h2 class="text-center">選單管理</h2>
       <table class="table table-bordered table-hover list-table">
         <thead>
           <tr class="active">
             <th class="text-center col-md-1">縮圖</th>
             <th class="text-center col-md-3">標題</th>
             <th class="text-center col-md-3">網址</th>
             <th class="text-center col-md-1">排序</th>
             <th class="text-center col-md-1">外連</th>
             <th class="text-center col-md-1">啟用</th>
             <th class="text-center col-md-2">
               <button onclick="window.location.href='?op=op_form'" type="button" class="btn btn-primary btn-xs">新增</button>
             </th>
           </tr>
         </thead>
         <tbody>
           {foreach from=$DBV item=row}
             <tr>
               <td>{if $row.file_name} <img src="{$row.file_name}" class="img-responsive">{/if}</td>
               <td>{$row.title}</td>
               <td>{$row.url}</td>
               <td class="text-center">{$row.sort}</td>
               <td class="text-center">{$row.target}</td>
               <td class="text-center">{$row.enable}</td>
               <td class="text-center">
                 <button onclick="window.location.href='?op=op_show&sn={$row.sn}'" type="button" class="btn btn-warning btn-xs">瀏覽</button>
                 <button onclick="window.location.href='?op=op_form&sn={$row.sn}'" type="button" class="btn btn-success btn-xs">編輯</button>
                 <button onclick="javascript:op_delete_js({$row.sn});" type="button" class="btn btn-danger btn-xs">刪除</button>
               </td>
             </tr>
           {/foreach}
         </tbody>
       </table>
     </div>

   {/if}
prev15-1 檔案上傳
16. 套用至前台輪播圖next

友善列印 & 下載 PDF 匯出 MarkDown 格式