《PHP學(xué)習(xí):WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解》要點(diǎn):
本文介紹了PHP學(xué)習(xí):WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解,希望對(duì)您有用。如果有疑問,可以聯(lián)系我們。
圖片上傳PHP教程
文件準(zhǔn)備:新建php文件,我用默認(rèn)主題Twenty Ten來測(cè)試,首先在這個(gè)主題的文件夾下新建一個(gè)文件-myfunctions.php?? 然后打開functions.php文件在最底部添加下面的代碼載入我們新建的這個(gè)文件:
PHP教程
include_once('myfunctions.php');
類的代碼如下:PHP教程
<?php //類ClassicOptions class ClassicOptions { /* -- getOptions函數(shù)獲取選項(xiàng)組 -- */ function getOptions() { // 在數(shù)據(jù)庫中獲取選項(xiàng)組 $options = get_option('classic_options'); // 如果數(shù)據(jù)庫中不存在該選項(xiàng)組, 設(shè)定這些選項(xiàng)的默認(rèn)值, 并將它們插入數(shù)據(jù)庫 if (!is_array($options)) { //初始默認(rèn)數(shù)據(jù) $options['ashu_copy_right'] = '阿樹工作室'; //這里可添加更多設(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ù)庫 if(isset($_POST['classic_save'])) { // 獲取選項(xiàng)組, 因?yàn)橛锌赡苤恍薷牟糠诌x項(xiàng), 所以先整個(gè)拿下來再進(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è)置頁面 add_theme_page("主題設(shè)置", "主題設(shè)置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display')); } /* -- 標(biāo)簽頁 -- */ 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è)置', '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('阿樹工作室版權(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è)置頁面,看一下我添加之后的效果圖:
PHP教程
PHP教程
此時(shí)文本域和上傳按鈕已經(jīng)有了,但是點(diǎn)擊還是沒有任何效果.為了點(diǎn)擊后彈出那個(gè)上傳框架,我們還需要添加js代碼.PHP教程
為了便于管理,我們新建一個(gè)js文件,在twentyten主題文件夾下新建一個(gè)文件夾js然后,在這個(gè)文件加下新建一個(gè)upload.js文件.添加js代碼:PHP教程
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()函數(shù)中添加以下代碼:PHP教程
//加載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è)置頁面的源碼,在源碼的大概最后面位置能看到你加載的這個(gè)js文件.PHP教程
好了,可以去試用了:
PHP教程
PHP教程
多個(gè)圖片上傳表單
首先我們修改表單,添加多個(gè)上傳按鈕,還加上顯示圖片用的div容器.
上面教程中的js代碼中是通過文本域的id值來獲取元素的,如果有多個(gè)文件上傳表單,但是在一個(gè)html文檔中id不能相同,那樣的話,就得針對(duì)每個(gè)表單都寫一個(gè)js,這樣很繁瑣,所以今天我們修改一下表單,并且將js改成通過class獲取對(duì)象.PHP教程
將類中的display()函數(shù)修改為(我新加了一個(gè)ashu_ico項(xiàng),并且將上傳按鈕的id屬性去掉改成class="ashu_bottom"):
PHP教程
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è)置'); ?></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)單,這里不贅述.PHP教程
且看新的js代碼,用編輯器打開我們的upload.js,修改代碼為:PHP教程
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&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)單..
PHP教程
PHP教程
《PHP學(xué)習(xí):WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解》是否對(duì)您有啟發(fā),歡迎查看更多與《PHP學(xué)習(xí):WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解》相關(guān)教程,學(xué)精學(xué)透。維易PHP學(xué)院為您提供精彩教程。
轉(zhuǎn)載請(qǐng)注明本頁網(wǎng)址:
http://www.fzlkiss.com/jiaocheng/7743.html