Javascript 自定义窗口小部件中的图像上载

我在wp小部件中上传图像时遇到问题。下面是functions.php中的代码

class about_me extends WP_Widget{

    public function __construct(){
        parent::__construct('about_me', 'About Me', array(
            'description' => 'This is all about me'
        ));
    }

    public function form($instance){
        $title = $instance['title'];
        $desc = $instance['desc'];
        $photo = $instance['photo'];
    ?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>">Your Name: </label></p>
        <p>
            <input class="widefat" type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title ?>">
        </p>
        <p><label for="<?php echo $this->get_field_id('desc'); ?>">Your Desc: </label></p>
        <p>
            <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('desc'); ?>" name="<?php echo $this->get_field_name('desc'); ?>"><?php echo $desc ;?></textarea>
        </p>
        <p><label for="<?php echo $this->get_field_id('photo'); ?>">Photo </label></p>
        <p>
            <input class="widefat image1" type="text" name="<?php echo $this->get_field_name('photo'); ?>" id="<?php echo $this->get_field_id('photo'); ?>" value="<?php echo $photo ;?>">
        </p>
        <p>
            <button class="image_upload1 widefat">Select Image</button>
        </p>



    <?php
    }

    public function widget ($args, $instance){
        $title = $instance['title'];
        $desc = $instance['desc'];
        echo $args['before_widget'].$args['before_title'].$title.$args['after_title']."<div class=\"textwidget\">".$desc."</div>".$args['after_widget'];

    }
} // class about_me extends WP_Widget END



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




/*
photo upload option in widget
*/

function photo_upload_option($hook) {

    if( $hook != 'widgets.php' ) 
        return;
    wp_enqueue_script( 'uploadphoto', get_template_directory_uri() . '/js/upload_image.js', array('jquery', 'media-upload', 'thickbox'), '1.0', 'true' );
    wp_enqueue_script( 'media-upload');
    wp_enqueue_script( 'thickbox');
    wp_enqueue_style ( 'thickbox');

}
add_action('admin_enqueue_scripts', 'photo_upload_option'); 

}))

这在文本字段中为我提供了一个gravatar链接。但我想在这里选择图像链接

---

我试过了，但没用。Jquery中可能存在问题。当我从函数中删除“html”变量时，在$（'img'，html）之后，它将显示一个gravatar图像链接。0.gravatar.com/avatar/…但是当放置html变量时，它显示为空。如何修复此问题

使用新的

wp.media

API而不是旧的

thickbox

更改

photo\u upload\u选项

功能如下

/*
photo upload option in widget
*/

function photo_upload_option($hook) {

    if( $hook != 'widgets.php' ) 
        return;

    //enque Javasript Media API
    wp_enqueue_media();

    wp_enqueue_script( 'uploadphoto', get_template_directory_uri() . '/js/upload_image.js', array('jquery'), '1.0', 'true' );

}

用下面的代码替换整个

upload_image.js

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      addImgLink = $('.image_upload1'),
      imgIdInput = $('.image1');

  // ADD IMAGE LINK
  addImgLink.on( 'click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }

    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Image',
      button: {
        text: 'Use this Image'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });


    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      //imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment id to our input field
      imgIdInput.val( attachment.id );
    });

    // Finally, open the modal on click
    frame.open();
  });

});

jQuery（函数（$）{
//设置要在作用域中使用的所有变量
var框架，
addImgLink=$（'.image_upload1'），
imgIdInput=$（'.image1'）；
//添加图像链接
addImgLink.on（'单击'，函数（事件）{
event.preventDefault（）；
//如果媒体框已存在，请重新打开它。
如果（帧）{
frame.open（）；
返回；
}
//创建一个新的媒体框架
frame=wp.media({
标题：“选择或上载图像”，
按钮：{
文本：“使用此图像”
},
multiple:false//设置为true以允许选择多个文件
});
//在媒体框中选择图像时。。。
frame.on（'select'，function（）{
//从帧状态获取媒体附件详细信息
var attachment=frame.state（）.get（'selection'）.first（）.toJSON（）；
//将附件URL发送到我们的自定义图像输入字段。
//imgContainer.append（“”）；
//将附件id发送到我们的输入字段
imgIdInput.val（附件.id）；
});
//最后，单击打开模态
frame.open（）；
});
});

您能详细解释一下问题是什么吗？您在哪里设置了

html

变量？我在你发布的代码中没有看到。嗨，拉维，当我在window.send_to_editor=function（html）{var imagelink=jQuery（'img'，html.）.attr（'src'）；jQuery（'.image1'）.val（imagelink）；tb_remove（）；}中设置html变量时，在选择图像之后，我在文本字段中没有得到任何值。如果没有，则获得gravatar链接。我想在我选择的文本字段中的相关图像链接。非常感谢。我真的很感激你的好意。

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      addImgLink = $('.image_upload1'),
      imgIdInput = $('.image1');

  // ADD IMAGE LINK
  addImgLink.on( 'click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }

    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Image',
      button: {
        text: 'Use this Image'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });


    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      //imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment id to our input field
      imgIdInput.val( attachment.id );
    });

    // Finally, open the modal on click
    frame.open();
  });

});