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

所以今天這篇教程我們給上一篇教程中新增的圖片上傳項新增一個圖片預覽。本篇教程沿用的程式碼還是前兩篇的程式碼，請先參考前兩篇教程：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

就這樣，完工了