Jquery 图像上载程序小部件未预览所选图像

我一直在尝试为WordPress开发一个图像小部件插件，由于以下代码，我几乎成功地做到了这一点：

<?php
/*
Plugin Name: Title Page Widget (PB)
Plugin URI: http://www.example.com
Description: Creates a full-screen title page for a post (designed to used with Site Origin Page Builder)
Author: Me
Version: 1.0
Author URI: http://www.example.com
*/

// Block direct requests
if ( !defined('ABSPATH') )
    die('-1');

add_action( 'widgets_init', function(){
    register_widget( 'Title_Page_Widget' );
}); 


/**
 * Adds Title_Page_Widget widget.
 */
class Title_Page_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Title_Page_Widget', // Base ID
            __('Title Page Widget (PB)', 'text_domain'), // Name
            array('description' => __( 'Creates a full-screen title page - designed for use with Site Origin\'s Page Builder plugin', 'text_domain' ),) // Args
        );

        add_action( 'sidebar_admin_setup', array( $this, 'admin_setup' ) );

    }

    function admin_setup(){

        wp_enqueue_media();
        wp_register_script('tpw-admin-js', plugins_url('tpw_admin.js', __FILE__), array( 'jquery', 'media-upload', 'media-views' ) );
        wp_enqueue_script('tpw-admin-js');
        wp_enqueue_style('tpw-admin', plugins_url('tpw_admin.css', __FILE__) );

    }       

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {


        $title_text = ( isset( $instance['title_text'] ) ) ? $instance['title_text'] : '';
        $title_image = ( isset( $instance['title_image'] ) ) ? $instance['title_image'] : '';


    ?>  

        <div class="titlepage_widget">

            <h3>Title</h3>
            <p>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_text' ); ?>"><?php _e( 'Text :' ); ?></label>    
                    <input class="title_text" id="<?php echo $this->get_field_id( 'title_text' ); ?>" name="<?php echo $this->get_field_name( 'title_text' ); ?>" value="<?php echo $title_text ?>" type="text"><br/>
                </div>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_image' ); ?>"><?php _e( 'Image :' ); ?></label>  
                    <input class="title_image" id="<?php echo $this->get_field_id( 'title_image' ); ?>" name="<?php echo $this->get_field_name( 'title_image' ); ?>" value="<?php echo $title_image ?>" type="text"><button id="title_image_button" class="button" onclick="image_button_click('Choose Title Image','Select Image','image','title_image_preview','<?php echo $this->get_field_id( 'title_image' );  ?>');">Select Image</button>            
                </div>
                <div id="title_image_preview" class="preview_placholder">
                <?php 
                    if ($title_image!='') echo '<img src="' . $title_image . '">';
                ?>
                </div>
            </p>    

        </div>

        <?php 
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {

        $instance = array();
        $instance['title_text'] = ( ! empty( $new_instance['title_text'] ) ) ? strip_tags( $new_instance['title_text'] ) : '';
        $instance['title_image'] = ( ! empty( $new_instance['title_image'] ) ) ? strip_tags( $new_instance['title_image'] ) : '';
        return $instance;
    }

} // class My_Widget

标题

我建议的第一件事是把整件事重写得更好一点。当你在写小部件时，如果你想要多个小部件，你会有多个相同的id，这不是一件好事

因此，创建清晰易懂的类，您可以在单击事件时指向这些类

我已经做了一些有效的东西，但它可以大大增强（我相信你会做的：D）

我添加了插件头以便安装它，并且我必须注册小部件以便在后端也能看到它。我添加了删除图像按钮，该按钮将删除图像并在单击时清除输入字段

php部分：

<?php
/*
Plugin Name: Title_Page_Widget
Plugin URI:
Description: Title_Page_Widget
Version: 1.0.0
Author:
Author
License: GPL
*/


/**
 * Adds Title_Page_Widget widget.
 */
class Title_Page_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Title_Page_Widget', // Base ID
            __('Title Page Widget (PB)', 'text_domain'), // Name
            array('description' => __( 'Creates a full-screen title page - designed for use with Site Origin\'s Page Builder plugin', 'text_domain' ),) // Args
        );

        add_action( 'sidebar_admin_setup', array( $this, 'admin_setup' ) );

    }

    function admin_setup(){

        wp_enqueue_media();
        wp_register_script('tpw-admin-js', plugins_url('tpw_admin.js', __FILE__), array( 'jquery', 'media-upload', 'media-views' ) );
        wp_enqueue_script('tpw-admin-js');
        wp_enqueue_style('tpw-admin', plugins_url('tpw_admin.css', __FILE__) );

    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {


        $title_text = ( isset( $instance['title_text'] ) ) ? $instance['title_text'] : '';
        $title_image = ( isset( $instance['title_image'] ) ) ? $instance['title_image'] : '';


    ?>

        <div class="titlepage_widget">

            <h3>Title</h3>
            <p>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_text' ); ?>"><?php _e( 'Text :' ); ?></label>
                    <input class="title_text" id="<?php echo $this->get_field_id( 'title_text' ); ?>" name="<?php echo $this->get_field_name( 'title_text' ); ?>" value="<?php echo $title_text ?>" type="text"><br/>
                </div>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_image' ); ?>"><?php _e( 'Image :' ); ?></label>
                    <input class="title_image" id="<?php echo $this->get_field_id( 'title_image' ); ?>" name="<?php echo $this->get_field_name( 'title_image' ); ?>" value="<?php echo $title_image ?>" type="text"><button id="title_image_button" class="button" onclick="image_button_click('Choose Title Image','Select Image','image','title_image_preview','<?php echo $this->get_field_id( 'title_image' );  ?>');">Select Image</button>
                    <div class="button remove_image_button" >Remove Image</div>
                </div>
                <div id="title_image_preview" class="preview_placholder">
                <?php
                    if ($title_image!='') echo '<img style="width:100%" src="' . $title_image . '">';
                ?>
                </div>
            </p>

        </div>

        <?php
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {

        $instance = array();
        $instance['title_text'] = ( ! empty( $new_instance['title_text'] ) ) ? strip_tags( $new_instance['title_text'] ) : '';
        $instance['title_image'] = ( ! empty( $new_instance['title_image'] ) ) ? strip_tags( $new_instance['title_image'] ) : '';
        return $instance;
    }

} // class My_Widget

function twp_widget(){
    register_widget('Title_Page_Widget');
}

add_action('widgets_init', 'twp_widget');

我已经测试过了，它可以工作了，但正如我所说，它需要工作。您需要查看单击来自哪个小部件，以及从何处删除图像，等等。我怀疑如果你有多个，一旦你点击删除按钮，你就会删除所有的图像。正如我所说，我们需要更多的工作

希望这能帮你找到正确的方向。
它就像我需要的那样工作！非常感谢你，@dingo\u d:）我的实际代码看起来比我发布的代码复杂一点，但这一个足够好，可以作为一个例子。你能帮我解释一下你提到的最后一部分吗？如何将
$this->get_field_id['title_image']
作为JS变量传递，以便在脚本文件中使用它？我们只需将DOM元素作为JS对象，如：
var my_element=jQuery（'your#element_id'）。因为你使用的是
$this->get_field_id['title_image']
在你的输入字段
id
中，你可以很容易地找到它（如果我理解正确的话）并使用它。嗯，在我的脑海中，什么都没有想到。您可以在php中嵌入js代码，并且在id中使用相同的代码。这将为每个小部件创建一个小js代码，但它可以工作。像在php中编写常规的
HTML
一样，在
中编写，这样就可以在其中使用
$this->get\u field\u id['title\u image']
。这只是一个事件委派。对此可以找到一个很好的解释。通常最好通过最接近的父对象绑定，但我知道如果要动态添加元素，则需要绑定到文档对象。所以可能是这样的…我猜你的变量是。您需要小心将所有变量都放在适当的范围内，以便可以使用它们。请注意，通过添加小部件，您将动态地向DOM添加内容（小部件是用AJAX添加的）。
<?php
/*
Plugin Name: Title_Page_Widget
Plugin URI:
Description: Title_Page_Widget
Version: 1.0.0
Author:
Author
License: GPL
*/


/**
 * Adds Title_Page_Widget widget.
 */
class Title_Page_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'Title_Page_Widget', // Base ID
            __('Title Page Widget (PB)', 'text_domain'), // Name
            array('description' => __( 'Creates a full-screen title page - designed for use with Site Origin\'s Page Builder plugin', 'text_domain' ),) // Args
        );

        add_action( 'sidebar_admin_setup', array( $this, 'admin_setup' ) );

    }

    function admin_setup(){

        wp_enqueue_media();
        wp_register_script('tpw-admin-js', plugins_url('tpw_admin.js', __FILE__), array( 'jquery', 'media-upload', 'media-views' ) );
        wp_enqueue_script('tpw-admin-js');
        wp_enqueue_style('tpw-admin', plugins_url('tpw_admin.css', __FILE__) );

    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {


        $title_text = ( isset( $instance['title_text'] ) ) ? $instance['title_text'] : '';
        $title_image = ( isset( $instance['title_image'] ) ) ? $instance['title_image'] : '';


    ?>

        <div class="titlepage_widget">

            <h3>Title</h3>
            <p>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_text' ); ?>"><?php _e( 'Text :' ); ?></label>
                    <input class="title_text" id="<?php echo $this->get_field_id( 'title_text' ); ?>" name="<?php echo $this->get_field_name( 'title_text' ); ?>" value="<?php echo $title_text ?>" type="text"><br/>
                </div>
                <div class="widget_input">
                    <label for="<?php echo $this->get_field_id( 'title_image' ); ?>"><?php _e( 'Image :' ); ?></label>
                    <input class="title_image" id="<?php echo $this->get_field_id( 'title_image' ); ?>" name="<?php echo $this->get_field_name( 'title_image' ); ?>" value="<?php echo $title_image ?>" type="text"><button id="title_image_button" class="button" onclick="image_button_click('Choose Title Image','Select Image','image','title_image_preview','<?php echo $this->get_field_id( 'title_image' );  ?>');">Select Image</button>
                    <div class="button remove_image_button" >Remove Image</div>
                </div>
                <div id="title_image_preview" class="preview_placholder">
                <?php
                    if ($title_image!='') echo '<img style="width:100%" src="' . $title_image . '">';
                ?>
                </div>
            </p>

        </div>

        <?php
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {

        $instance = array();
        $instance['title_text'] = ( ! empty( $new_instance['title_text'] ) ) ? strip_tags( $new_instance['title_text'] ) : '';
        $instance['title_image'] = ( ! empty( $new_instance['title_image'] ) ) ? strip_tags( $new_instance['title_image'] ) : '';
        return $instance;
    }

} // class My_Widget

function twp_widget(){
    register_widget('Title_Page_Widget');
}

add_action('widgets_init', 'twp_widget');

var custom_uploader;

function image_button_click(dialog_title, button_text, library_type, preview_id, control_id) {

    event.preventDefault();

    //If the uploader object has already been created, reopen the dialog
    //if (custom_uploader) {
     //   custom_uploader.open();
    //    return;
    //}

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: dialog_title,
        button: {
            text: button_text
        },
        library : { type : library_type },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {

        attachment = custom_uploader.state().get('selection').first().toJSON();
        jQuery('#' + control_id).val(attachment.url);

        var html = '';

        if (library_type=='image') {
            html = '<img src="' + attachment.url + '">';
        }

        if (library_type=='video') {
            html = '<video autoplay loop><source src="' + attachment.url + '" type="video/' + get_extension( attachment.url ) + '" /></video>';
        }

        var uploaded_image = jQuery('.uploaded_image');

        if (uploaded_image.length) {
            uploaded_image.remove();
        }

        jQuery('.title_image').before('<img class="uploaded_image" src="'+attachment.url+'" style="width:100%";>');

        jQuery('#' + preview_id).empty();
        jQuery('#' + preview_id).append(html);
    });

    //Open the uploader dialog
    custom_uploader.open();

}

jQuery(document).on('click','.remove_image_button', function(e){
    e.preventDefault();
    jQuery('.uploaded_image').remove();
    jQuery('#title_image_preview img').remove();
    jQuery('.title_image').val('');
});

function get_extension( url ){

    return url.substr((url.lastIndexOf('.') + 1));

}

    var uploaded_image = jQuery('.uploaded_image');

    if (uploaded_image.length) {
        uploaded_image.remove();
    }

    jQuery('.title_image').before('<img class="uploaded_image" src="'+attachment.url+'" style="width:100%";>');

jQuery(document).on('click','.remove_image_button', function(e){
    e.preventDefault();
    jQuery('.uploaded_image').remove();
    jQuery('#title_image_preview img').remove();
    jQuery('.title_image').val('');
});