博文中心

WordPress 调用自带媒体中心图片上传功能

作者: 分类: 发布于:2019.10.16 阅读:160 次

wordpress自带的媒体中心具有便捷的附件或图片上传功能,而在制作主题或插件时往往会需要用到上传功能,比如上传LOGO、上传照片或投稿时上传附件等,如果自己编写上传功能不仅麻烦且浪费时间,而wordpress早就已经考虑到了这一些问题,因此集成了相关的一些函数提供给开发者。

注意:确认调用的页面已经引入jquery库,否则无效!

该方法适用于wordpress 3.6以上版本:

1、在要调用wordpress图片上传功能的页面添加以下代码:

<?php wp_enqueue_media();?>
<script>
jQuery(document).ready(function() {
var upload_frame;
var value_id;
jQuery('.upload_button').live('click', function(event) {
value_id = jQuery(this).attr('id');
event.preventDefault();
if (upload_frame) {
upload_frame.open();
return;
}
upload_frame = wp.media({
title: 'Insert image',
button: {
text: 'Insert',
},
multiple: false
});
upload_frame.on('select', function() {
attachment = upload_frame.state().get('selection').first().toJSON();
jQuery('input[name=' + value_id + ']').val(attachment.url);
});
upload_frame.open();
});
});
</script>

2、在需要添加图片上传的地方添加以下代码:

<input type="text" size="60" value="" name="upload" id="upload_input"/>
<a id="upload" class="upload_button button" href="#">上传</a>

但是,当一个页面调用几个上传的时候,这个代码就不灵了。

试试这个

$('.ribs_field_area').on( 'click', 'a.upload_button', function( event ){ //xzx
event.preventDefault();
upload_btn = $( this );
if(upload_frame){
upload_frame.open();
return;
}
upload_frame = wp.media({
title: '插入图片',
button: {
text: '插入'
},
multiple: false
});
upload_frame.on('select',function(){
var attachment = upload_frame.state().get('selection').first().toJSON();
upload_btn.parent().find('.field_upload').val(attachment.url).trigger('change');
});
upload_frame.open();
});
2 抢沙发
我要评论