前面两篇教程中，我们已经添加了多个图片上传表单，然后还缺了个图片上传实时预览功能，有时候这个功能很有必要，比如图片插入是否成功？插入是否正确？

所以今天这篇教程我们给上一篇教程中添加的图片上传项添加一个图片预览。本篇教程沿用的代码还是前两篇的代码，请先参考前两篇教程：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

就这样，完工了