:::

7-5-1 加入圖片的管理功能

  1. 目前圖片只能不斷上傳,卻無法刪除,因此,必須加入圖片刪除的功能。
  2. 修改 op_edit.tpl,我們在下方將圖片讀出,並加上刪除按鈕:
    {include file='op_create.tpl'}
    
    <!-- 圖片管理 -->
    <div class="row row-cols-1 row-cols-md-4 g-4 my-3">
      {foreach $news.files as $file => $thumb}
        <div class="col">
          <div class="card h-100">
            <img src="{$url}/uploads/{$news.id}/thumbs/{$thumb}" class="card-img-top" alt="{$file}" />
            <div class="card-body">
              <div class="card-text">
                <a href="index.php?op=destroy_file&id={$news.id}&file={$file}&thumb={$thumb}" class="btn btn-danger">
                  <i class="fas fa-times"></i>
                  刪除此檔
                </a>
              </div>
            </div>
          </div>
        </div>
      {/foreach}
    </div>

  3. 這是利用卡片的網格工具做的,可參考:https://bootstrap5.hexschool.com/docs/5.0/components/card/#grid-cards
  4. 因為有傳了一個 $file $thumb 變數給 admin/index.php ,所以接著請在 admin/index.php 先加入 $file $thumb 檔名的過濾
    // 過濾外來變數
    ...略...
    $file = isset($_REQUEST['file']) ? filter_var($_REQUEST['file'], FILTER_SANITIZE_STRING) : '';
    $thumb = isset($_REQUEST['thumb']) ? filter_var($_REQUEST['thumb'], FILTER_SANITIZE_STRING) : '';

     

  5. 然後加入流程,刪完後會轉回編輯畫面以繼續編輯,也就是執行 admin下的 index.php,故不須 ../

    switch ($op) {
        ...略...
    
        // 刪除圖片
        case 'destroy_file':
            destroy_file($id, $file, $thumb);
            header("location: index.php?op=edit&id=$id");
            exit;
    
        ...略...
    }

     

  6. 最後加入刪除圖片的函式即可,函式必須告知要刪除哪一篇文章的什麼檔,包含原檔及縮圖,所以共會有三個參數

    // 刪除檔案
    function destroy_file($id, $file, $thumb)
    {
        // 刪除原圖檔或影片
        if (file_exists(_PATH . "/uploads/$id/$file")) {
            unlink(_PATH . "/uploads/$id/$file");
        }
        // 刪除縮圖
        if (file_exists(_PATH . "/uploads/$id/thumbs/$thumb")) {
            unlink(_PATH . "/uploads/$id/thumbs/$thumb");
        }
    }

    我們先用 file_exists() 判斷檔案是否存在,若有再利用 unlink() 是用來刪除檔案即可。

  7. 最後實際試試能否刪掉就知道是否成功了!

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1834

計數器

今天: 4131413141314131
昨天: 5069506950695069
總計: 5134579513457951345795134579513457951345795134579