WordPress正在为媒体库使用主干JS。目前，官方文件似乎不多。我翻遍了一些源代码，这就是我如何让它工作的。。。

免责声明：

这是我第一次对BackboneJS进行黑客攻击，所以这一切都可能是完全错误的PHP File

您需要这样才能加载媒体库的所有主干模板。

wp_enqueue_media();

如果它工作正常，那么你会发现这些当你检查。。。

这是Add New 按钮

<button class="page-title-action add-new-image">
  <?php echo esc_html_x( \'Add New\', \'file\' ); ?>
</button>

主干将在此处加载模板。

<div class="media-frame mode-grid"></div>

这是处理文件上载的表单。

<form method="POST" enctype="multipart/form-data">

  <!--
    * the "enctype" is important
    * remove "multiple" attribute to limit to a single file
    * the brackets in the "name" attribute make it an array for multiple files
    * auto submits when the user selects a file
  -->

  <input id="uploaded_files"
         multiple="multiple"
         name="uploaded_files[]"
         onchange="form.submit()"
         type="file" >
  </input>

  ...

</form>

请执行任何验证表单的操作，然后执行类似的操作来处理文件上载。。。

if (empty($_FILES)) {
  echo \'<div class="error"><p>No files were uploaded.</p></div>\';
} else if (isset($_FILES[\'uploaded_files\'])) {
  $files = $_FILES["uploaded_files"];

  // written for multiple files
  foreach ($files[\'name\'] as $key => $value) {
    if ($files[\'name\'][$key]) {
      $file = array(
        \'name\' => $files[\'name\'][$key],
        \'type\' => $files[\'type\'][$key],
        \'tmp_name\' => $files[\'tmp_name\'][$key],
        \'error\' => $files[\'error\'][$key],
        \'size\' => $files[\'size\'][$key]
      );

      if ($file[\'error\'] !== UPLOAD_ERR_OK) {
        echo \'<div class="error"><p>Upload Error: (\'. $file[\'error\'] .\') for <strong>\'. $file[\'name\'] .\'</strong></p></div>\';
        return;
      }

      $_FILES = array("uploaded_files" => $file);

      // 0 = post ID = none = unattached
      // if you want to attach it to a post then replace the 0 with the post ID
      $uploaded = media_handle_upload(\'uploaded_files\', 0);

      if (is_wp_error($uploaded)) {
        echo \'<div class="error"><p>\'. $uploaded->get_error_message() . \'</p></div>\';
      } else {
        echo \'<div class="updated"><p>File uploaded: <strong>\'. $file[\'name\'] .\'</strong></p></div>\';
      }
    }
  }
}

JS File

您在这个JS文件中看到的许多选择器都来自主干加载的WordPress模板中的元素，所以不要更改它们。您在文件中找不到它们，但它们是必需的。

// File Uploader (aka: uploaderInline)
// This loads the HTML markup for the dashed box and its contents
var uploaderInline = new wp.media.view.UploaderInline({
  controller: {
    state: function() {
      return {
        get: function(x) {
          switch (x) {
            case "suggestedHeight":
              return null;
            case "suggestedWidth":
              return null;
          }
        }
      };
    }
  },
  options: {
    browser: $(".add-new-image"),
    postId: 0 // 0 = unattached
  },
  canClose: true
}).render();

uploaderInline.ready();

$(".media-frame").append(uploaderInline.el);

$(".uploader-inline .drop-instructions").css({ display: "block" });

uploaderInline.hide();

// DropZone (aka: uploaderWindow)
// This enables the drag & drop area
var uploaderWindow = new wp.media.view.UploaderWindow({
  controller: {
    trigger: function() {},
    on: function() {}
  },
  uploader: {
    dropzone: $(".uploader-inline"),
    container: $(".uploader-inline")
  }
}).render();

uploaderWindow.ready();

$(".uploader-inline").append(uploaderWindow.el);

// This will show/hide the File Uploader
$(".add-new-image").on("click", function(e) {
  e.preventDefault();

  var isHidden = $(".uploader-inline").is(":hidden");

  if (isHidden) {
    uploaderInline.show();
  } else {
    uploaderInline.hide();
  }
});

// This triggers the file selector when the user
// clicks the "Select Files" button in the dashed box
$("button.browser").on("click", function() {
  $("#uploaded_files").click();
});

Useful Resources

File Uploader (aka: uploaderInline)

DropZone (aka: uploaderWindow)