jquery – WordPress 3.5 Media Uploader多文件选择

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

});

有没有人能够获得多个文件选择工作正常?我错过了什么吗?谢谢!

解决方法

更新

我认为媒体上传者自问题回答以来已经更新.我猜在以前版本的wordpress倍数:’add’选项是不存在的建议其他用户.我不太清楚

一切都符合你的代码.只有一小部分缺失.

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

附件转换为JSON后,可以按照文档中的说明使用.您可以将图像网址放置在发布到服务器的某些隐藏字段中,并将用户显示所选图像.

只是一件小事我觉得奇怪的是,我们需要按ctrl点击选择图像.它应该是相当复选框或某事.

更新

ctrl单击或移动单击选择多个图像是wordpress给出的方式.仔细看看,打开

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

一个定义的函数toggleSelectionHandler.它监听按键组合用户按下并相应地调用其他功能,这些功能会改变某些类并引起实际选择.

检查后,你可以看到两个课程被应用 –

>选择
>细节

细节类定义当前点击/活动选择(蓝色粗边框)的样式,并选择实际将图像标记为选定,并在选择数组中返回.

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

PS:wordpress实际上并没有使用上面的文件.它选择同一文件的压缩版本.因此,您可能需要加载未压缩的文件并播放.您可以强制wordpress通过设置使用未压缩的js文件

define('SCRIPT_DEBUG',true);

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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...