javascript - 我在尝试将上传媒体按钮添加到自定义元框时遇到问题

Question

我真的没有看到问题是，当我尝试在 wordpress 上使用我的媒体按钮时。这是我的源代码。
php:

<?php 
/**
 * @package  OverviewPlugin
 */
namespace Inc\Base;
use Inc\Api\SettingsApi;
use Inc\Base\BaseController;
use Inc\Api\Callbacks\AdminCallbacks;
use Inc\Api\Callbacks\WorkerCallbacks;
/**
* 
*/
class WorkerController extends BaseController
{

    public $callbacks;

    public $settings;
    public function register()
    {
        if ( ! $this->activated( 'worker_manager' ) ) return;
        $this->settings = new SettingsApi();
        $this->callbacks = new WorkerCallbacks();

        add_action( 'init', array( $this, 'worker_cpt' ) );
        add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
        add_action( 'save_post', array( $this, 'save_meta_box' ) );
        add_action( 'manage_worker_posts_columns', array( $this, 'set_custom_columns' ) );
        add_action( 'manage_worker_posts_custom_column', array( $this, 'set_custom_columns_data' ), 10, 2 );
        add_filter( 'manage_edit-worker_sortable_columns', array( $this, 'set_custom_columns_sortable' ) );
        $this->setShortcodePage();
        add_shortcode( 'worker-display', array( $this, 'worker_display' ) );
        add_action('admin_enqueue_scripts', array($this, 'my_admin_scripts'));
        add_action('admin_enqueue_scripts', array($this,'my_admin_scripts'));
        add_action('admin_enqueue_styles',array($this,'my_admin_styles'));


    }
    function my_admin_scripts() {    
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
        wp_register_script('my-upload', WP_PLUGIN_URL.'/overview-plugin/assets/worker.min.js', array('jquery','media-upload','thickbox'));
        wp_enqueue_script('my-upload');
    }

    function my_admin_styles() {

        wp_enqueue_style('thickbox');
    }



    public function worker_display()
    {
        ob_start();
        echo "<link rel=\"stylesheet\" href=\"$this->plugin_url/assets/display.min.css\" type=\"text/css\" media=\"all\" />";
        require_once( "$this->plugin_path/templates/display.php" );
        echo "<script src=\"$this->plugin_url/assets/display.min.js\"></script>";

        return ob_get_clean();
    }

public function render_features_box($post)
    {
        wp_nonce_field( 'overview_worker', 'overview_worker_nonce' );
        $data = get_post_meta( $post->ID, '_overview_worker_key', true );
        $name = isset($data['name']) ? $data['name'] : '';
        $description = isset($data['description']) ? $data['description'] : '';
        $image = isset($data['image']) ? $data['image'] : '';
        $position = isset($data['position']) ? $data['position'] : '';
        $github = isset($data['github']) ? $data['github'] : '';
        $linkedin = isset($data['linkedin']) ? $data['linkedin'] : '';
        $xing = isset($data['xing']) ? $data['xing'] : '';
        $facebook = isset($data['facebook']) ? $data['facebook'] : '';
        $approved = isset($data['approved']) ? $data['approved'] : false;
        $featured = isset($data['featured']) ? $data['featured'] : false;


        ?>
        <p>
            <label class="meta-label" for="overview_worker_name">Name</label>
            <input type="text" id="overview_worker_name" name="overview_worker_name" class="widefat" value="<?php echo esc_attr( $name ); ?>">
        </p>
        <p>
            <label class="meta-label" for="overview_worker_description">Short Description</label>
            <input type="text" id="overview_worker_description" name="overview_worker_description" class="widefat" value="<?php echo esc_attr( $description ); ?>">
        </p>
        <p>
            <label class="meta-label" for="overview_worker_image">Image</label>
            <input id="upload_image" type="text" size="36" name="upload_image" value="<?php echo esc_attr( $image ); ?>" />
            <input id="upload_image_button" type="button" value="Upload Image" />

        </p>

js:

jQuery(document).ready( function( $ ) {

    $('#upload_image_button').click(function() {

        formfield = $('#upload_image').val();
        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr('src');
           $('#upload_image').val(imgurl);
           tb_remove();
        }

        return false;
    });

});

如果代码很多，我很抱歉，但我真的不知道我哪里出错了。我的想法是有一个与上传媒体按钮功能相同的按钮。我已经看到了很多引用，但仍然无法运行代码。

当我单击上传按钮并打开我的 chrome 检查器时，我收到以下错误

worker.min.js:6 Uncaught ReferenceError: formfield is not defined
    at HTMLInputElement.<anonymous> (worker.min.js:6)
    at HTMLInputElement.dispatch (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload,moxiejs,plupload&ver=5.3.2:3)
    at HTMLInputElement.r.handle (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload,moxiejs,plupload&ver=5.3.2:3)

Answer 1

要么你可以这样做

formfield = $('#upload_image').val();

因为 $image 是一个 php 变量，你不能像这样直接在 jquery 中获取它的值。