WordPress 3.5媒体上传器多文件选择 [英] WordPress 3.5 Media Uploader Multiple File Select

问题描述

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

我跟着，它表明我应该能够设置多个为真，但它仍然只允许一个单一的文件上传或选择。

以下是我的代码：

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

  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用于显示媒体上传器和处理选定的图像： p> 
 
 
  var tgm_media_frame; （）函数（）{
 
 if（tgm_media_frame）{
 tgm_media_frame.open（）; $ b $（'。upload-images' b返回; 
} 
 
 tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media（{
 multiple：true，
 library：{
类型：'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）; 
 //在这里用attachment.id和/或attachment.url做一些事情
}）; 
}）; 
 
 tgm_media_frame.open（）; 
 
} ）; 
  
有没有人能够得到多个文件选择正常工作？我错过了什么吗？ 
 
解决方案
 更新我想媒体上传已经更新，因为问题提出并回答。我猜在以前版本的wordpress  multiple：'add'选项不存在，正如其他用户所建议的。我不太清楚。 
 
 
 
 
 
 
一切都很好用你的代码。 
  selection.map（function（attachment）{
 attachment = attachment.toJSON（） （< img src =+ attachment.url +>）; 
}）; 
 $（＃something）。 
  
 附件已转换 toJSON 你可以像文档中提到的那样使用它。您可以将图片网址放置在发布到服务器的隐藏字段中，并在同一时间向用户显示所选图片。
 
 
 
只是一件小事，我感到奇怪的是，我们需要按 ctrl  + 点击选择图像。它应该是复选框或其他什么。
 
 
 
 
 
 
 更新
 
 
 
  ctrl  + 点击或 shift  + 点击给了。仔细一看，打开 
 
 
 
 
 ... \wp-includes \js\media-views.js 
 
 
定义了一个函数 -   toggleSelectionHandler 。它听按键组合用户按下了相应的调用某些类别的其他功能并导致实际的选择。  
 
 
在检查firbug后，你可以看到两个类被应用 -  
 
 
 
 
 选定 
 
 
 详情 
 ol> 
 
 
 详细信息类定义了当前点击/活动选择（带有蓝色粗边框）和 实际上会将图像标记为选中状态并将其返回到 selection 数组中。您可以从该文件本身或编写自己的功能来处理选择。第一种方法虽然不好。 
 
 
 
  PS ：Wordpress实际上并不使用上述文件。它选择同一个文件的压缩版本。所以你可能想要加载未压缩的文件并玩耍。您可以通过设置 
 
 
  define（'SCRIPT_DEBUG'，true）来强制wordpress使用未压缩的js文件。 
  
在 wp-config.php 中。这将跳过 load-scripts.php 的行为（通过合并将每个js文件的压缩
版本加载到单个文件中）。  
I'm building a WordPress theme with a custom settings page. Some of the settings require the user to upload/add a set of images (more than 1). The default behavior of the media uploader is to upload and/or select a single image and insert it into a post. 

I've followed this excellent guide on utilizing the media uploader, and it suggests that I should be able to set multiple to true, but it still only allows for a single file to be uploaded or selected.

Here's my code:

Load in the needed scripts since this is a custom settings page:
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 For displaying the media uploader and handling the selected images:
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();

});
Has anyone been able to get multiple file selection working properly? Am I missing something? Thanks!
解决方案
Update

I think media uploader has been updated since question asked and answered.  I guess in previous version of wordpress multiple: 'add' option was not present as suggested by other users. I'm not sure enough.  



Everything's good with your code. Just a small part missing.
selection.map( function( attachment ) {
    attachment = attachment.toJSON();
    $("#something").after("<img src=" +attachment.url+">");
});
After attachment converted toJSON you can use it as mentioned in documentation. You can place image urls into some hidden fields posting to server and display selected images to user same time.

Just a small thing I feel weird is that, we need to press  ctrl+click to select images. It should be rather checkboxes or something.



update

ctrl+click or shift+click for selecting multiple images is the way wordpress have given. For a closer look, open 

  
...\wp-includes\js\media-views.js
There's a function defined  - toggleSelectionHandler. It listens for key combination user has pressed and accordingly calls other function which changes certain classes and cause actual selection. 

After inspecting into firbug, you can see two classes are applied --

selected
details
details class defines styles for current clicked/active selection ( with blue thick border) and selected actually marks image as selected and returns it in selection array.

You can alter that behaviour either from that file itself or write your own function to handle selection. First approach is not good though. 

PS :  Wordpress does not actually use above file. It chooses compressed version of same file. So you might want to load uncompressed file and play around. You can force wordpress to use uncompressed js files by setting 
define('SCRIPT_DEBUG', true);
in wp-config.php. This will skip behaviour of load-scripts.php (loading compressed 
version of every js file into single file by merging them ). 

                        
这篇关于WordPress 3.5媒体上传器多文件选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！