Upload multiple image with media_handle_upload with multiple file field [duplicate]

You can try adding the input file field once and using then using jQuery to add more fields when clicking add more.

Here are the steps

  1. Register your setting using register_setting function
  2. Create Menu using add_menu_page. This also requires a calback function
  3. Add the thickbox and media-upload script using wp_enqueue_script and wp_enqueue_style
  4. Use the call back function to display your form and you can use custom scripts in it too.
  5. The following is an example using class to display form with upload
    option and repeatable field

.

<?php
class WP_Site_Option{
    function __construct(){
        add_action('admin_init', array(&$this,'register_settings') );
        add_action('admin_menu', array(&$this,'create_menu'));  
        add_action('admin_print_scripts', array(&$this,'add_scripts') );
        add_action('admin_print_styles', array(&$this,'add_styles') );
    }

    public function create_menu(){
        add_menu_page('Site Options', 'Site Options', 'administrator', 'site-options', array(&$this,'settings'),$src="",62);
    }

    public function register_settings(){
        register_setting( 'starter_setting_group', 'starter' );
    }

    public function add_styles(){
        wp_enqueue_style('thickbox');
    }

    public function add_scripts(){
        wp_enqueue_script('thickbox');
        wp_enqueue_script('meida-upload');      
    }

    public function settings(){
        if(!current_user_can('manage_options')){
            wp_die(__('You do not have sufficient permissions to access this page.'));
        }

?>
        <div class="wrap">
            <h2>Site Options</h2>
            <form method="post" action="options.php"> 
                <?php @settings_fields('starter_setting_group'); ?>
                <?php @do_settings_fields('starter_setting_group'); ?>
                <?php $content = get_option('starter'); ?>
                <table class="form-table">  
                    <script>
                        var count = 1;
                    </script>

                    <!-- loop -->

                        <?php foreach($content['logo'] as $logo): ?>
                        <tr>
                        <th></th>
                        <td>
                            <input id="upload_image" type="text" size="36" name="starter[logo][]" value="<?php echo $logo; ?>"  class="regular-text upload-image"/>
                            <input id="upload_image_button" type="button" value="Upload Image" class="upload_image_button"/>
                            <br />Enter an URL or upload an image for the banner.
                            <br/>
                            <?php 
                                if($logo): 
                                    $url = $logo;
                            ?>
                                <img src="<?php echo $url; ?>" height="100" style="float:left"/>
                            <?php endif; ?>
                            <div id="temp"></div>
                        </td>
                        </tr>
                        <?php endforeach; ?>

                    <!-- loop end -->

                    <div class="more-image"></div>
                    <tr>
                        <td>
                            <input type="button" id="add-new-image" class="add-new-image" value="Add More"/>
                        </td>
                    </tr>
                </table>

                <?php @submit_button(); ?>
                <script language="JavaScript">
                    var formfield = '';
                    jQuery(document).ready(function() {
                        jQuery('.add-new-image').on('click',function(){
                            var uploaded = jQuery('.upload-image');
                            var count = uploaded.length + 1;
                            var to_rep = '<tr class="repetable-tr"><th scope="row"><label>Upload Logo</label></th><td><input id="upload_image_'+count+'" type="text" size="36" name="starter[logo][]" value=""  class="regular-text upload-image"/><input id="upload_image_button_'+count+'" type="button" value="Upload Image" class="upload_image_button"/><br />Enter an URL or upload an image for the banner.<div id="temp"></div></td></tr>';
                            jQuery('.more-image').append(to_rep);
                        });

                        jQuery('.upload_image_button').live('click',function() {
                            formfield = jQuery(this).prev().attr('id');

                            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
                            jQuery('#TB_iframeContent').css('width', '800px');
                            jQuery('#TB_window').css('width', '800px');
                            return false;
                        });

                        window.send_to_editor = function(html) {
                            imgurl = jQuery('img', html).attr('src');
                            jQuery('#'+formfield).val(imgurl);
                            //jQuery('#temp').html('<img src="'+imgurl+'" width="200">');
                            tb_remove();
                        }
                    });
                </script>
            </form>
        </div>
<?php
    }
}
$wp_site_option = new WP_Site_Option();
    ?>