jquery - 图像 uploader 小部件未预览所选图像

标签 jquery wordpress image widget preview

我一直在尝试为 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

以下是前面代码附带的 jQuery:

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>';
        }

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

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

}

function get_extension( url ){

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

}

你可以找到全部内容 right here .

问题是，只有在单击“保存”按钮后才会显示所选图像，如果在选择图像后立即将其显示在预览字段中，而无需单击“保存”按钮，那就太好了，就像“帖子编辑”屏幕中的特色图像小部件一样。

有什么想法吗？ :)

最佳答案

我建议的第一件事是更好地重写整个内容。您正在编写小部件，并说您想要多个小部件，那么您将拥有多个相同的 id，这不是一件好事。

因此，创建清晰易懂的类，您可以在点击事件上指向它们。

我已经制作了一些有用的东西，但它可以大大增强(我相信这是你会做的事情:D)。

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

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');

JS部分:

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('');
});

我已经测试过它并且它有效，但正如我所说，它需要工作。您需要查看点击源自哪个小部件，以及从何处删除图像，等等。我怀疑如果您有多个图像，一旦您单击“删除”，您就会删除所有图像。正如我所说，需要更多工作。

希望这能让您朝着正确的方向前进。

关于jquery - 图像 uploader 小部件未预览所选图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35684924/

上一篇：jquery - Tablesorter 输出到 CSV 不会触发

下一篇：jQuery 表单登录检查没有重定向，密码和登录返回空白

相关文章：

javascript - jQuery 嵌套 .each 循环 JSON 成功

javascript - 在特定位置添加创建的元素

html - CSS 下拉菜单在 Wordpress 中不起作用，但在所有其他页面上都起作用

html - 中心 Woocommerce 简码产品

jquery - 展开类似于谷歌搜索图像布局的内容？

asp.net - Javascript DoEvents 等效吗？

javascript - 如何在 DOM 中的克隆/插入元素上触发事件？

javascript - 用 Sinon.js 模拟的对象不承认通过 jQuery.delegate 回调执行了它们的方法

html - Shopify 图像 slider - 始终扩展到用户全屏

javascript - 图像变量

©2024 IT工具网  联系我们