本节教程需要再上一篇教程的基础上完成，请先准备好上一篇教程中的代码和 js 文件。本教程要实现的目标是后台能有多个图片上传表单。

首先我们修改表单，添加多个上传按钮，还加上显示图片用的 div 容器。

上一篇教程中的 js 代码中是通过文本域的 id 值来获取元素的，如果有多个文件上传表单，但是在一个 html 文档中 id 不能相同，那样的话，就得针对每个表单都写一个 js，这样很繁琐，所以今天我们修改一下表单，并且将 js 改成通过 class 获取对象。

将类中的 display() 函数修改为 (我新加了一个 ashu_ico 项，并且将上传按钮的 id 属性去掉改成)：

  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.         <label>   
  14.             <input type="text" size="80"  name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>   
  15.             <input type="button" value="上传" class="ashu_bottom"/>   
  16.         </label>   
  17.         </p>   
  18.         <p>   
  19.         <label>   
  20.             <input type="text" size="80"  name="ashu_ico" id="ashu_ico" value="<?php echo($options['ashu_ico']); ?>"/>   
  21.             <input type="button" value="上传" class="ashu_bottom"/>   
  22.         </label>   
  23.         </p>           
  24.         <p class="submit">    
  25.             <input type="submit" name="classic_save" value="<?php _e('保存设置'); ?>" />         
  26.         </p>         
  27.     </div>         
  28. </form>         
  29. <?php         
  30.     }  

这里新加了一个设置项，前面默认数据设置、数据更新都需要相应的增加项目，很简单，这里不赘述。

且看新的 js 代码，用编辑器打开我们的 upload.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);   
  13.          tb_remove();   
  14.     }   
  15.     
  16. });   

到此多个图片上传已经实现，其实也很简单。。