快捷導(dǎo)航

WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解

更新時(shí)間：2016年01月11日 15:48:56 作者：阿樹(shù)工作室

這篇文章主要介紹了WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解,包括多個(gè)圖片上傳表單功能的實(shí)現(xiàn),需要的朋友可以參考下

圖片上傳

文件準(zhǔn)備：新建php文件，我用默認(rèn)主題Twenty Ten來(lái)測(cè)試，首先在這個(gè)主題的文件夾下新建一個(gè)文件-myfunctions.php 然后打開(kāi)functions.php文件在最底部添加下面的代碼載入我們新建的這個(gè)文件：

include_once('myfunctions.php');

類的代碼如下：

<?php   
//類ClassicOptions  
class ClassicOptions {   
  /* -- getOptions函數(shù)獲取選項(xiàng)組 -- */   
  function getOptions() {  
    // 在數(shù)據(jù)庫(kù)中獲取選項(xiàng)組   
    $options = get_option('classic_options');   
    // 如果數(shù)據(jù)庫(kù)中不存在該選項(xiàng)組, 設(shè)定這些選項(xiàng)的默認(rèn)值, 并將它們插入數(shù)據(jù)庫(kù)   
    if (!is_array($options)) {   
      //初始默認(rèn)數(shù)據(jù)  
      $options['ashu_copy_right'] = '阿樹(shù)工作室';  
        
      //這里可添加更多設(shè)置選項(xiàng)  
        
      update_option('classic_options', $options);   
    }  
    // 返回選項(xiàng)組  
    return $options;  
  }  
  /* -- init函數(shù) 初始化 -- */   
  function init() {   
    // 如果是 POST 提交數(shù)據(jù), 對(duì)數(shù)據(jù)進(jìn)行限制, 并更新到數(shù)據(jù)庫(kù)   
    if(isset($_POST['classic_save'])) {   
      // 獲取選項(xiàng)組, 因?yàn)橛锌赡苤恍薷牟糠诌x項(xiàng), 所以先整個(gè)拿下來(lái)再進(jìn)行更改   
      $options = ClassicOptions::getOptions();   
      // 數(shù)據(jù)處理  
      $options['ashu_copy_right'] = stripslashes($_POST['ashu_copy_right']);   
        
      //在這追加其他選項(xiàng)的限制處理   
        
      // 更新數(shù)據(jù)   
      update_option('classic_options', $options);   
      
    } else {  
      // 否則, 重新獲取選項(xiàng)組, 也就是對(duì)數(shù)據(jù)進(jìn)行初始化  
      ClassicOptions::getOptions();   
    }  
      
    //添加設(shè)置頁(yè)面  
    add_theme_page("主題設(shè)置", "主題設(shè)置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));   
  }   
  /* -- 標(biāo)簽頁(yè) -- */   
  function display() {   
    $options = ClassicOptions::getOptions(); ?>   
    <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">   
    <div class="wrap">   
    <h2><?php _e('阿樹(shù)工作室主題設(shè)置', 'classic'); ?></h2>   
    <!-- 設(shè)置內(nèi)容 -->   
    <table class="form-table">   
      <tbody>   
        <tr valign="top">   
          <td>  
            <label>   
              <input type="text" name="ashu_copy_right" value="<?php echo($options['ashu_copy_right']); ?>" size="20"/><?php _e('阿樹(shù)工作室版權(quán)文字');?>   
            </label>   
          </td>   
        </tr>   
      </tbody>   
    </table>   
    <!-- TODO: 在這里追加其他選項(xiàng)內(nèi)容 -->   
    <p class="submit">   
      <input type="submit" name="classic_save" value="<?php _e('保存設(shè)置'); ?>" />   
    </p>   
  </div>   
</form>   
<?php   
  }   
}  
  
/*初始化，執(zhí)行ClassicOptions類的init函數(shù)*/   
add_action('admin_menu', array('ClassicOptions', 'init'));    
?>

之后查看我們的后臺(tái)設(shè)置頁(yè)面，看一下我添加之后的效果圖：

2016111154528680.png (520×240)

此時(shí)文本域和上傳按鈕已經(jīng)有了，但是點(diǎn)擊還是沒(méi)有任何效果。為了點(diǎn)擊后彈出那個(gè)上傳框架，我們還需要添加js代碼。

為了便于管理，我們新建一個(gè)js文件，在twentyten主題文件夾下新建一個(gè)文件夾js然后，在這個(gè)文件加下新建一個(gè)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&amp;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()函數(shù)中添加以下代碼：

//加載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');

之后如果你查看后臺(tái)設(shè)置頁(yè)面的源碼，在源碼的大概最后面位置能看到你加載的這個(gè)js文件。

好了，可以去試用了：

2016111154559200.png (397×240)

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

將類中的display()函數(shù)修改為(我新加了一個(gè)ashu_ico項(xiàng)，并且將上傳按鈕的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(); ?>     
    <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">     
    <div class="wrap">     
    <h2><?php _e('阿樹(shù)工作室主題設(shè)置'); ?></h2>  
    <p>  
    <label>  
      <input type="text" size="80" name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>  
      <input type="button" value="上傳" class="ashu_bottom"/>  
    </label>  
    </p>  
    <p>  
    <label>  
      <input type="text" size="80" name="ashu_ico" id="ashu_ico" value="<?php echo($options['ashu_ico']); ?>"/>  
      <input type="button" value="上傳" class="ashu_bottom"/>  
    </label>  
    </p>      
    <p class="submit">  
      <input type="submit" name="classic_save" value="<?php _e('保存設(shè)置'); ?>" />     
    </p>     
  </div>     
</form>     
<?php     
  }

這里新加了一個(gè)設(shè)置項(xiàng)，前面默認(rèn)數(shù)據(jù)設(shè)置、數(shù)據(jù)更新都需要相應(yīng)的增加項(xiàng)目，很簡(jiǎn)單，這里不贅述。

且看新的js代碼，用編輯器打開(kāi)我們的upload.js，修改代碼為：

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

到此多個(gè)圖片上傳已經(jīng)實(shí)現(xiàn)，其實(shí)也很簡(jiǎn)單。。

2016111154737103.png (213×240)