WordPress 3.5 媒体上传器多文件选择

Question

我正在构建一个带有自定义设置页面的 WordPress 主题。某些设置需要用户上传/添加一组图像（超过 1 张）。媒体上传器的默认行为是上传和/或选择单个图像并将其插入到帖子中。

我已经关注this excellent guide 使用媒体上传器，它表明我应该能够将 multiple 设置为 true，但它仍然只允许上传或选择单个文件。

这是我的代码：

加载所需的脚本，因为这是一个自定义设置页面：

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

Javascript/jQuery 用于显示媒体上传器和处理选定的图像：

var tgm_media_frame;

$('.upload-images').click(function() {

  if ( tgm_media_frame ) {
    tgm_media_frame.open();
    return;
  }

  tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({
    multiple: true,
    library: {
      type: 'image'
    },
  });

  tgm_media_frame.on('select', function(){
    var selection = tgm_media_frame.state().get('selection');
    selection.map( function( attachment ) {
      attachment = attachment.toJSON();
          console.log(attachment);
          // Do something with attachment.id and/or attachment.url here
    });
  });

  tgm_media_frame.open();

});

有没有人能够让多个文件选择正常工作？我错过了什么吗？谢谢！

Answer 1

您只需将multiple:true 更改为multiple:'add'。这就是默认创建图库的工作方式。

Answer 2

更新

我认为自提问和回答以来，媒体上传器已经更新。我猜在以前版本的 wordpress 中 multiple: 'add' 选项没有按照其他用户的建议出现。我不确定。

---

您的代码一切正常。只是少了一小部分。

selection.map( function( attachment ) {
    attachment = attachment.toJSON();
    $("#something").after("<img src=" +attachment.url+">");
});

在attachment 转换为toJSON 之后，您可以按照文档中的说明使用它。您可以将图像 url 放置到一些隐藏字段中发布到服务器并同时向用户显示选定的图像。

我觉得奇怪的一点是，我们需要按 ctrl+click 来选择图像。应该是复选框什么的。

---

更新

ctrl+click 或 shift+click 用于选择多个图像是 wordpress 提供的方式。要仔细查看，请打开

...\wp-includes\js\media-views.js

定义了一个函数 - toggleSelectionHandler。它监听用户按下的组合键，并相应地调用改变某些类并导致实际选择的其他函数。

查看 firbug 后，可以看到应用了两个类 --

1. selected
2. details

details 类定义当前单击/活动选择的样式（带有蓝色粗边框），selected 实际上将图像标记为选中并在 selection 数组中返回它。

您可以从该文件本身更改该行为，也可以编写自己的函数来处理选择。第一种方法虽然不好。

PS : Wordpress 实际上并没有使用上述文件。它选择同一文件的压缩版本。因此，您可能想要加载未压缩的文件并进行播放。您可以通过设置强制 wordpress 使用未压缩的 js 文件

define('SCRIPT_DEBUG', true);

在wp-config.php。这将跳过 load-scripts.php 的行为（加载压缩 通过将每个 js 文件的版本合并为单个文件）。

Answer 3

如果有人想知道如何做到这一点，一种方法是这样。请注意，它将完全覆盖其实现范围内的默认行为。

wp.media.view.Attachment.prototype.toggleSelectionHandler = function( event ) {
    var method = 'between';
    if ( event.shiftKey ) {
        method = 'between';
    } else {
        method = 'toggle';
    }

    this.toggleSelection({
        method: method
    });
};

如果 multiple 设置为 true，那么这将允许您选择多个项目，例如在图库屏幕中。