WordPress後台中實現圖片上傳功能的執行個體講解_php執行個體

圖片上傳

檔案準備：建立php檔案，我用預設主題Twenty Ten來測試，首先在這個主題的檔案夾下建立一個檔案-myfunctions.php 然後開啟functions.php檔案在最底部添加下面的代碼載入我們建立的這個檔案：

include_once('myfunctions.php'); 

類的代碼如下：

<?php   //類ClassicOptions  class ClassicOptions {     /* -- getOptions函數擷取選項組 -- */     function getOptions() {      // 在資料庫中擷取選項組       $options = get_option('classic_options');       // 如果資料庫中不存在該選項組, 設定這些選項的預設值, 並將它們插入資料庫       if (!is_array($options)) {         //初始預設資料        $options['ashu_copy_right'] = '阿樹工作室';                //這裡可添加更多設定選項                update_option('classic_options', $options);       }      // 返回選項組      return $options;    }    /* -- init函數 初始化 -- */     function init() {       // 如果是 POST 提交資料, 對資料進行限制, 並更新到資料庫       if(isset($_POST['classic_save'])) {         // 擷取選項組, 因為有可能只修改部分選項, 所以先整個拿下來再變更         $options = ClassicOptions::getOptions();         // 資料處理        $options['ashu_copy_right'] = stripslashes($_POST['ashu_copy_right']);                 //在這追加其他選項的限制處理                 // 更新資料         update_option('classic_options', $options);             } else {        // 否則, 重新擷取選項組, 也就是對資料進行初始化        ClassicOptions::getOptions();       }            //添加設定頁面      add_theme_page("主題設定", "主題設定", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));     }     /* -- 標籤頁 -- */     function display() {       $options = ClassicOptions::getOptions(); ?>          <?php     }   }    /*初始化，執行ClassicOptions類的init函數*/   add_action('admin_menu', array('ClassicOptions', 'init'));    ?>  

之後查看我們的後台設定頁面，看一下我添加之後的：

此時文本域和上傳按鈕已經有了，但是點擊還是沒有任何效果。為了點擊後彈出那個上傳架構，我們還需要添加js代碼。

為了便於管理，我們建立一個js檔案，在twentyten主題檔案夾下建立一個檔案夾js然後，在這個檔案加下建立一個upload.js檔案。添加js代碼：

jQuery(document).ready(function() {    //upbottom為上傳按鈕的id    jQuery('#upbottom').click(function() {      //ashu_logo為文本域       targetfield = jQuery(this).prev('#ashu_logo');       tb_show('', 'media-upload.php?type=image&TB_iframe=true');       return false;    });      window.send_to_editor = function(html) {       imgurl = jQuery('img',html).attr('src');       jQuery(targetfield).val(imgurl);       tb_remove();    }    }); 

下面就是載入js和css了。
在上面的類中display()函數中添加以下代碼：

//載入upload.js檔案      wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');      //載入上傳圖片的js(wp內建)      wp_enqueue_script('thickbox');      //載入css(wp內建)      wp_enqueue_style('thickbox'); 

之後如果你查看後台設定頁面的源碼，在源碼的大概最後面位置能看到你載入的這個js檔案。

好了，可以去試用了：

多個圖片上傳表單
首先我們修改表單，添加多個上傳按鈕，還加上顯示圖片用的div容器。
上面教程中的js代碼中是通過文本域的id值來擷取元素的，如果有多個檔案上傳表單，但是在一個html文檔中id不能相同，那樣的話，就得針對每個表單都寫一個js，這樣很繁瑣，所以今天我們修改一下表單，並且將js改成通過class擷取對象。

將類中的display()函數修改為(我新加了一個ashu_ico項，並且將上傳按鈕的id屬性去掉改成class="ashu_bottom")：

function display() {      //載入upload.js檔案      wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');      //載入上傳圖片的js(wp內建)      wp_enqueue_script('thickbox');      //載入css(wp內建)      wp_enqueue_style('thickbox');      $options = ClassicOptions::getOptions(); ?>              <?php       } 

這裡新加了一個設定項，前面預設資料設定、資料更新都需要相應的增加項目，很簡單，這裡不贅述。

且看新的js代碼，用編輯器開啟我們的upload.js，修改代碼為：

jQuery(document).ready(function() {    //尋找class為ashu_bottom的對象    jQuery('input.ashu_bottom').click(function() {      //擷取它前面的一個兄弟元素       targetfield = jQuery(this).prev('input');       tb_show('', 'media-upload.php?type=image&TB_iframe=true');       return false;    });      window.send_to_editor = function(html) {       imgurl = jQuery('img',html).attr('src');       jQuery(targetfield).val(imgurl);       tb_remove();    }    });  

到此多個圖片上傳已經實現，其實也很簡單。。

