啊！

任何关心用户体验的人都会面临一个经典问题。

根据我的经验，wp.media 就是要走的路。

这是not my code, but it gets the job done. I\'ve used it plenty.

我将逐一解释它的作用：

// Source: https://vedmant.com/using-wordpress-media-library-in-widgets-options/
jQuery(document).ready(function ($) {

   $(document).on("click", ".upload_image_button", function (e) {
      e.preventDefault();
      var $button = $(this);


      // Create the media frame.
      var file_frame = wp.media.frames.file_frame = wp.media({
         title: \'Select or upload image\',
         library: { // remove these to show all
            type: \'image\' // specific mime
         },
         button: {
            text: \'Select\'
         },
         multiple: false  // Set to true to allow multiple files to be selected
      });

      // When an image is selected, run a callback.
      file_frame.on(\'select\', function () {
         // We set multiple to false so only get one image from the uploader

         var attachment = file_frame.state().get(\'selection\').first().toJSON();

         $button.siblings(\'input\').val(attachment.url).change();

      });

      // Finally, open the modal
      file_frame.open();
   });
});

第一件事是第一件事。We need a button, tied to an input, 稍后将对此进行详细介绍。它可以位于自定义程序中，也可以位于您需要的任何位置：

<button class="upload_image_button">Upload Image</button>

然后，我们需要一个绑定到此按钮的数据摄取器。不幸的是，这超出了范围，但假设您在小部件中执行此操作，这将导致：

<p>
    <label for="<?php echo $this->get_field_id( \'image\' ); ?>">Image:</label>
    <br>
    <input class="widefat" id="<?php echo $this->get_field_id( \'image\' ); ?>" name="<?php echo $this->get_field_name( \'image\' ); ?>" value="<?php echo $instance[\'image\'];?>" />
    <br>
    <button class="upload_image_button">Upload Image</button>
</p>

到目前为止，我们只针对按钮，继续：

  // Create the media frame.
  var file_frame = wp.media.frames.file_frame = wp.media({
     title: \'Select or upload image\',
     library: { // remove these to show all
        type: \'image\' // specific mime
     },
     button: {
        text: \'Select\'
     },
     multiple: false  // Set to true to allow multiple files to be selected
  });

代码注释得很好，但下面是相应的文档文件：https://codex.wordpress.org/Javascript_Reference/wp.media

所以我们只是调用WP-JS-API来访问媒体帧。现在，开始获取我们需要的文件路径：

file_frame.on(\'select\', function () {

每当我们从框架中选择某个内容时，以AJAX调用、JSON格式获取所述文件的路径，并让我使用它-

var attachment = file_frame.state().get(\'selection\').first().toJSON();

还记得那个必须连接到输入的按钮吗？是的，所以我们插入了这个链接，我们刚刚进入了这个输入：

$button.siblings(\'input\').val(attachment.url).change();

这样，一个新的链接就诞生了。