使用MEDIA_HANDLE_UPLOAD和多个文件字段上传多个图像

时间:2015-07-01 作者:Ramesh Murugesan

我需要添加多个图像与图像描述形式wp管理。

Admin Form:

<label for="image[]">Image</label>
<input type="file" name="image[]"/>
<label for="imgdesc[]">Description</label>
<input type="text" name="imgdesc[]"/>

<label for="image[]">Image</label>
<input type="file" name="image[]"/>
<label for="imgdesc[]">Description</label>
<input type="text" name="imgdesc[]"/>
                 .
                 .
                 . 
// number of image and description is dynamic

<?php wp_nonce_field(\'image\', \'image_upload_nonce\'); ?>
这里是我提交表单时的PHP代码。

<?php
if (isset($_POST[\'image_upload_nonce\']) && wp_verify_nonce($_POST[\'image_upload_nonce\'], \'image\')) {

    require_once( ABSPATH . \'wp-admin/includes/image.php\' );
    require_once( ABSPATH . \'wp-admin/includes/file.php\' );
    require_once( ABSPATH . \'wp-admin/includes/media.php\' );

    //Here my doubt to handle multiple images
    $attachment_id = media_handle_upload(\'image\', 0);

    if (is_wp_error($attachment_id)) {
        echo $attachment_id->get_error_message();
    } else {
        // The image was uploaded successfully!
    }
} else {
    echo "The security check failed, maybe show the user an error.";
}
我不知道我的方法是否正确。如果没有,请纠正我。

1 个回复
SO网友:Karun

您可以尝试添加输入文件字段一次,然后在单击“添加更多”时使用jQuery添加更多字段。

以下是步骤

使用注册您的设置register_setting functionadd_menu_page. 这还需要calback函数

  • 添加thickboxmedia-upload 使用脚本wp_enqueue_scriptwp_enqueue_style
  • 使用回调函数显示表单,也可以在表单中使用自定义脚本

    <?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();
        ?>
    

    结束

    相关推荐

    Setting the uploads directory

    所以我想更改我的上传目录。我可以通过以下方式进行更改:add_filter( \'pre_option_upload_url_path\', \'wpse_77960_upload_url\' ); function wpse_77960_upload_url() { return \'http://subdomain.example.com/files\'; } 或update_option(\'upload_url_path\', \'/wp-content/up