Question

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

我关注this excellent guide使用媒体上传器，它表明我应该可以将多个设置为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

<强>更新

我认为媒体上传者自提问和回答后已更新。我想在以前版本的wordpress multiple: 'add'选项不存在其他用户的建议。我不太确定。

您的代码一切都很好。只是一小部分失踪。

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

attachment转换toJSON后，您可以按照文档中的说明使用它。您可以将图像URL放入发布到服务器的某些隐藏字段中，并将所选图像显示给用户同时使用。

我觉得奇怪的是，我们需要按 ctrl + 点击来选择图像。它应该是复选框或其他东西。

<强>更新

ctrl + 单击或 shift + 单击以选择多个图像是wordpress给出的方式。仔细看看，打开

... \ WP-包括\ JS \媒体views.js

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

在检查完firbug后，您可以看到应用了两个类 -

selected
details

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

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

PS ：Wordpress实际上并没有使用上面的文件。它选择相同文件的压缩版本。因此，您可能希望加载未压缩的文件并进行播放。您可以通过设置

define('SCRIPT_DEBUG', true);

wp-config.php

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

Answer 2

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

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，那么您可以选择多个项目，例如在图库屏幕中。

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

3 个答案: