我正在使用自定义设置页面构建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();
});
【WordPress 3.5 Media Uploader多个文件选择】有没有人能够使多个文件选择正常工作?我想念什么吗?谢谢!
#1更新
我认为自从提出问题并回答以来, 媒体上传器已经更新。我猜在以前版本的wordpress中, ” multiple” (添加)选项不存在, 正如其他用户所建议的那样。我不太确定。
你的代码一切都很好。仅缺少一小部分。
selection.map( function( attachment ) {
attachment = attachment.toJSON();
$("#something").after("<
img src="http://www.srcmini.com/+attachment.url+">
");
});
将附件转换为JSON后, 你可以按照文档中所述使用它。你可以将图像URL放入一些隐藏字段中, 这些字段将发布到服务器, 并同时向用户显示所选图像。
我觉得很奇怪的是, 我们需要按ctrl +单击以选择图像。它应该是复选框或其他东西。
更新
ctrl +单击或Shift +单击以选择多个图像是wordpress给出的方式。要仔细看, 请打开
… \ wp-includes \ js \ media-views.js定义了一个函数-toggleSelectionHandler。它侦听用户按下的组合键, 并因此调用更改某些类并导致实际选择的其他功能。
检查了firbug之后, 你可以看到应用了两个类-
- 已选
- 细节
你可以从文件本身更改该行为, 也可以编写自己的函数来处理选择。第一种方法虽然不好。
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, 则可以选择多个项目, 例如在图库屏幕中。
推荐阅读
- MAMP OS X上的WordPress 3
- 在MS IIS v6 Web服务器上安装WordPress 3.0.1
- woocommerce(如何在自定义循环中显示折扣)
- Woocommerce通过产品ID获取图片库
- Woocommerce函数set_total_sales()未设置并将total_sales保存到数据库
- Woocommerce定制商店页面布局
- Woocommerce(显示父类别(任意)而不是当前类别)
- Woocommerce(不能使用woocommerce模板)
- VLAN与三成交换机