本節教程需要再上一篇教程的基礎上完成，請先準備好上一篇教程中的程式碼和 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. });   

到此多個圖片上傳已經實現，其實也很簡單。。