WordPress 3.5 Media Uploader多个文件选择

我正在使用自定义设置页面构建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();

});

有没有人能够使多个文件选择正常工作？我想念什么吗？谢谢！

#1

更新

我认为自从提出问题并回答以来, 媒体上传器已经更新。我猜在以前版本的wordpress中, ” multiple”(添加)选项不存在, 正如其他用户所建议的那样。我不太确定。

你的代码一切都很好。仅缺少一小部分。

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

将附件转换为JSON后, 你可以按照文档中所述使用它。你可以将图像URL放入一些隐藏字段中, 这些字段将发布到服务器, 并同时向用户显示所选图像。

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

更新

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

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

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

检查了firbug之后, 你可以看到应用了两个类-

1. 已选
2. 细节

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

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

PS：Wordpress实际上并不使用上述文件。选择相同文件的压缩版本。因此, 你可能需要加载未压缩的文件并进行播放。你可以通过设置来强制Wordpress使用未压缩的js文件

define('SCRIPT_DEBUG', true);

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

#2

你只需要将Multiple：true更改为Multiple：’add’。这是默认的创建库的工作方式。

#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, 则可以选择多个项目, 例如在图库屏幕中。