在WP Metabox自定义图像加载器上运行图像上传的问题

时间:2018-01-16 作者:Mona Coder

通过使用WP 4.9.4,我试图在自定义metabox中通过在metabox中使用此代码生成图像上载输入

<p>
    <label for="your_fields[image]">Image Upload</label><br>
    <input type="text" name="your_fields[image]" id="your_fields[image]" class="meta-image regular-text" value="<?php echo $meta[\'image\']; ?>">
    <input type="button" class="button image-upload" value="Browse">
</p>
<div class="image-preview"><img src="<?php echo $meta[\'image\']; ?>" style="max-width: 250px;"></div>
在JavaScript中

jQuery(document).ready(function ($) {
      // Instantiates the variable that holds the media library frame.
      var meta_image_frame;
      // Runs when the image button is clicked.
      $(\'.image-upload\').click(function (e) {
        // Get preview pane
        var meta_image_preview = $(this).parent().parent().children(\'.image-preview\');
        // Prevents the default action from occuring.
        e.preventDefault();
        var meta_image = $(this).parent().children(\'.meta-image\');
        // If the frame already exists, re-open it.
        if (meta_image_frame) {
          meta_image_frame.open();
          return;
        }
        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
          title: meta_image.title,
          button: {
            text: meta_image.button
          }
        });
        // Runs when an image is selected.
        meta_image_frame.on(\'select\', function () {
          // Grabs the attachment selection and creates a JSON representation of the model.
          var media_attachment = meta_image_frame.state().get(\'selection\').first().toJSON();
          // Sends the attachment URL to our custom image input field.
          meta_image.val(media_attachment.url);
          meta_image_preview.children(\'img\').attr(\'src\', media_attachment.url);
        });
        // Opens the media library frame.
        meta_image_frame.open();
      });
    });
我得到了

未捕获的TypeError:无法读取未定义的属性“frames”

在设置媒体库帧时出错

meta_image_frame = wp.media.frames.meta_image_frame = wp.media({...});
你能告诉我我做错了什么吗?

1 个回复
SO网友:Luděk Černý

I had the same error because I forgot to add:

wp_enqueue_media();

Then I found this how to and solved the problem like this:

1: You have to enqueue WP JavaScript library for media and your own JS file:

public function enqueue_scripts() {
  //WP library
  wp_enqueue_media();
  //Your JS file
  wp_register_script(\'name-of-your-script\', plugin_dir_url( __FILE__ ) . \'js/path-to-your.js\', array( \'jquery\'), $this->version, true);
  wp_enqueue_script($this->plugin_name);
}
add_action(\'admin_enqueue_scripts\', \'enqueue_scripts\');

2: Create html for the form parts

<input class="img-01" type="text" name="img-01" size="100" />
<input type="button" class="button wk-button" data="img-01" value="<?php _e(\'Select image\', \'your-text-domain\');?>" />
<div><img src="" class="img-01"/></div>

3: Add code to your JS file (js/path-to-your.js)

jQuery(function ($) {
  $(document).ready(function () {
    $(".wk-button").click(function (e) {
      var wkMedia;
      // Using dynamic selector is useful if you want to use media selection/upload more then once within a single page (this value is populated from data attribute of the button
      var selector = $(this).attr("data");
      // Title is populated from value of the button to make it ready for localization
      var title = $(this).attr("value");
      e.preventDefault();
      // If the upload object has already been created, reopen the dialog
      if (wkMedia) {
        wkMedia.open();
        return;
      }
      // Extend the wp.media object
      wkMedia = wp.media.frames.file_frame = wp.media({
        title: title,
        button: {
          text: title,
        },
        multiple: false,
      });

      // When a file is selected, grab the URL and set it as the text field\'s value
      wkMedia.on("select", function () {
        var attachment = wkMedia.state().get("selection").first().toJSON();
          $("input." + selector).val(attachment.url);
          $("img." + selector).attr("src",attachment.url);        
      });
      // Open the upload dialog
      wkMedia.open();
    });
  });
});
结束

相关推荐

撤消定义(‘UPLOADS’,‘’.‘FILES’);以重指向“wp-Content/Uploads”文件夹

是否可以通过使用将“wp content/uploads”设置为使用不同的文件夹define( \'UPLOADS\', \'\'.\'files\' ); 我已经永久有效地更改了所有路径,如果是这样的话,我如何撤消它,使其指向“wp内容/上传”?我认为只要把define( \'UPLOADS\', \'\'.\'files\' ); 我会解决一个问题,我上传到WP的文件不想下载,因为URL不是文件的正确路径。