前面兩篇教程中，我們已經添加了多個圖片上傳表單，然後還缺了個圖片上傳即時預覽功能，有時候這個功能很有必要，比如圖片插入是否成功？插入是否正確？

所以今天這篇教程我們給上一篇教程中添加的圖片上傳項添加一個圖片預覽。本篇教程沿用的代碼還是前兩篇的代碼，請先參考前兩篇教程：WordPress 主題後台教程 (九): 多個圖片上傳表單      WordPress 主題後台製作 (八): 圖片上傳

首先我們給表單添加一個圖片顯示的 div 容器。修改類的 display() 函數為 (我是寫這個教程也是同時測試代碼的可用性，所以有些地方不完美，這裏又給所有上傳圖片的 url 文本框加了一個 class 屬性，以便後面 js 獲取改對象，同時預覽圖片的 span 標籤中的 class 屬性值為對應的文本框 name 值後面加上_img)：

  1.  function display() {   
  2.         //加載 upload.js 文件   
  3.         wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');   
  4.         //加載上傳圖片的 js(wp 自帶)   
  5.         wp_enqueue_script('thickbox');   
  6.         //加載 css(wp 自帶)   
  7.         wp_enqueue_style('thickbox');   
  8.         $options = ClassicOptions::getOptions(); ?>         
  9.         <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">         
  10.         <div class="wrap">         
  11.         <h2><?php _e('阿樹工作室主題設置'); ?></h2>   
  12.         <p>   
  13.         <?php //添加預覽圖片代碼   
  14.         if($options['ashu_logo'] != ''){   
  15.             echo '<span class="ashu_logo_img"><img src='.$options['ashu_logo'].' alt="" /></span>';   
  16.         }   
  17.         ?>   
  18.         <label>   
  19.             <input type="text" size="80" class="ashu_upload_input" name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>   
  20.             <input type="button" value="上傳" class="ashu_bottom"/>   
  21.         </label>   
  22.         </p>   
  23.         <p>   
  24.         <?php //添加預覽圖片代碼   
  25.         if($options['ashu_ico'] != ''){   
  26.             echo '<span class="ashu_ico_img"><img src='.$options['ashu_ico'].' alt="" /></span>';   
  27.         }   
  28.         ?>   
  29.         <label>   
  30.             <input type="text" size="80" class="ashu_upload_input" name="ashu_ico" id="ashu_ico" value="<?php echo($options['ashu_ico']); ?>"/>   
  31.             <input type="button" value="上傳" class="ashu_bottom"/>   
  32.         </label>   
  33.         </p>           
  34.         <p class="submit">    
  35.             <input type="submit" name="classic_save" value="<?php _e('保存設置'); ?>" />         
  36.         </p>         
  37.     </div>         
  38. </form>         
  39. <?php         
  40.     }  

此時請參考效果 (途中下載速度是浮雲。。)：

不過這裏還有個不完美的地方，就是不能即時更新預覽圖，比如上傳了新圖片，或者手動修改了 url 地址，預覽圖並不會改變，我們通過我們的 js 代碼來監控文本框中 url 值的變化。然後即時改變預覽圖片。修改後的 js 代碼為：

  1. jQuery(document).ready(function() {   
  2.     //查找 class 為 ashu_bottom 的對象   
  3.     jQuery('input.ashu_bottom').click(function() {   
  4.         //獲取它前面的一個兄弟元素   
  5.          targetfield = jQuery(this).prev('input');   
  6.          tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');   
  7.          return false;   
  8.     });   
  9.     
  10.     window.send_to_editor = function(html) {   
  11.          imgurl = jQuery('img',html).attr('src');   
  12.          jQuery(targetfield).val(imgurl).focus(); //添加獲得焦點函數   
  13.          tb_remove();   
  14.     }   
  15.        
  16.     //圖片即時預覽 ashu_upload_input 為圖片 url 文本框的 class 屬性   
  17.     jQuery('input.ashu_upload_input').each(function()   
  18.     {   
  19.         jQuery(this).bind('change focus blur', function()   
  20.         {      
  21.             //獲取改文本框的 name 屬性後面   
  22.             $select = '#' + jQuery(this).attr('name') + '_img';   
  23.             $value = jQuery(this).val();   
  24.             $image = '<img src ="'+$value+'" />';   
  25.                            
  26.             var $image = jQuery($select).html('').append($image).find('img');   
  27.                
  28.             //set timeout because of safari   
  29.             window.setTimeout(function()   
  30.             {   
  31.                 if(parseInt($image.attr('width')) < 20)   
  32.                 {      
  33.                     jQuery($select).html('');   
  34.                 }   
  35.             },500);   
  36.         });   
  37.     });   
  38.     
  39. });   

注意：預覽圖片的 span 標籤中的 class 屬性值為對應的文本框 name 值後面加上_img

就這樣，完工了