我正在尝试制作基本的图像上传小部件。上载程序正在工作，但有一个按钮Save 在选择新图像后处于非活动状态。有一个隐藏的输入，其中新图像的值正在更新。但即使更新了值，WordPress也无法识别它。只有手动编辑此输入时，“保存”按钮才会激活。

下面是我的PHP代码：

  // setup the widget name, description etc.
  function __construct() {
    $widget_options = array(
      \'classname\'   => esc_attr( "widget-about text-center" ),
      \'description\'  => esc_html__( \'About me widget\', \'lami\' ),
      \'customize_selective_refresh\' => true
    );
    parent::__construct( \'lami_profile\', \'Lami About Me\', $widget_options);
  }


  // front-end display of widget
  function widget( $args, $instance ) {

    extract( $args );
    echo $args[\'before_widget\'];

    if ( ! empty( $instance[\'image_url\'] ) ) {
      $alt = get_post_meta( attachment_url_to_postid($instance[\'image_url\']), \'_wp_attachment_image_alt\', true );
      ?>
        <img src="<?php echo esc_url( $instance[\'image_url\'] ); ?>" class="widget-about-img" alt="<?php echo esc_attr( $alt ); ?>">
      <?php
    }


    echo $args[\'after_widget\'];
  }


  // back-end display of widget
  function form( $instance ) {

    $instance = wp_parse_args(
      (array) $instance,
      array(
        \'image_url\' => \'\',
      )
    );

    $image = ( ! empty( $instance[\'image_url\'] ) ? $instance[\'image_url\'] : \'\' );

    ?>  


      <!-- Image -->
      <h4><?php esc_attr_e( "Choose your image", \'lami\' ); ?></h4>
      <p>        
        <img class="deo-image-media" src="<?php echo esc_url( $image ); ?>" style="display: block; width: 100%;" />
      </p>
      <p>
        <input type="text" class="deo-image-hidden-input widefat" name="<?php echo $this->get_field_name( \'image_url\' ); ?>" id="<?php echo $this->get_field_id( \'image_url\' ); ?>" value="<?php echo esc_url( $image ); ?>" />
        <input type="button" class="deo-image-upload-button button button-primary" value="<?php esc_attr_e(\'Choose Image\',\'lami\')?>">
        <input type="button" class="deo-image-delete-button button" value="<?php esc_attr_e(\'Remove Image\', \'lami\') ?>">
      </p>


    <?php
  }


  // update of the widget
  function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance[\'image_url\'] = ( ! empty( $new_instance[\'image_url\'] ) ) ? strip_tags( $new_instance[\'image_url\'] ) : \'\';
  }

}


add_action( \'widgets_init\', function() {
  register_widget( \'Lami_About_Widget\' );
});

And JS code for Uploader and Buttons

(function($) {
  "use strict";

  /* WordPress Media Uploader
  -------------------------------------------------------*/
  function upload(type) {
    if ( mediaUploader ) {
      mediaUploader.open();
    }

    var mediaUploader = wp.media.frames.file_frame = wp.media({
      title: \'Select an Image\',
      button: {
        text: \'Use This Image\'
      },
      multiple: false
    });

    mediaUploader.on(\'select\', function() {
      var attachment = mediaUploader.state().get(\'selection\').first().toJSON();
      $(\'.deo-\' + type + \'-hidden-input\').attr(\'value\', attachment.url);
      $(\'.deo-\' + type + \'-media\').attr(\'src\', attachment.url);
    });
    mediaUploader.open();
  }

  $(\'body\').on(\'click\', \'.deo-image-upload-button\', function() {
    upload(\'image\');
  });

  $(\'body\').on(\'click\', \'.deo-image-delete-button\', function() {
    $(\'.deo-image-hidden-input\').attr(\'value\', \'\');
    $(\'.deo-image-media\').attr(\'src\', \'\');
  });

})(jQuery);