10

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

我遵循了这个关于使用媒体上传器的优秀指南，它表明我应该能够将多个设置为 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();

});

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

4

3 回答 3

15

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

于 2014-07-22T10:57:11.033 回答
13

更新

我认为自提问和回答以来，媒体上传器已经更新。我猜在以前版本的 wordpressmultiple: '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实际上将图像标记为选中并将其返回到选择数组中。

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

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

define('SCRIPT_DEBUG', true);

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

于 2013-07-08T19:17:52.027 回答
1

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

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那么这将允许您选择多个项目，例如在画廊屏幕中。

于 2014-05-10T15:19:29.530 回答