WordPress调用wp.media媒体库组件来包含图片、视频、文档等文件

terry 2年前 (2023-09-24) 阅读数 101 #后端开发

在WordPress主题或插件应用开发中，经常会有上传照片、视频、文档等媒体文件的需求。如果开发者独立编写媒体下载组件，需要付出大量的时间和精力，但是通过调用WordPress自带的媒体库组件，却可以得到事半功倍的高效果。只需要编写一些简单的js代码就可以拥有强大的媒体上传功能。

wp.media代码参数

var mediaObj = wp.media({   
    frame: 'select', // 选择调用媒体库哪种媒体类型，可选select、post、image、audio、video，选择select只允许上传新媒体或选择已上传的媒体，其它类型可自行测试，完整选项选择post    
    title: '上传图片', // 窗口标题    
    multiple: false, // 是否多选，true或false
    // 查询参数
    library: {
        order: 'DESC', //排序倒序        
        orderby: 'date', //排序条件，可选name、author、date、title、modified、uploadedTo、id、post__in、menuOrder        
        type: 'image', // mime type. e.g. 'image', 'image/jpeg'        
        search: null, // 搜索附件的标题        
        uploadedTo: null // 包括仅上传到指定文章ID的媒体，wp.media.view.settings.post.id (用于当前帖子id)
    },
    button: {
        text: 'Done' //按钮文本，如插入、确认等
    }
});

1。使用 `open()` 方法触发 wp.media：

1	mediaObj.open();

2。插入的步骤或选定的媒体

在对象的选定事件上调用？加载 DOM 时触发

pasted – 当插入元素的 $el 加载到 DOM 中时触发

open – 打开媒体窗口时触发

escape – 通过转义键元素触发

close – 出现关闭时

select – 选择媒体文件时亮起

activate – 状态激活时亮起

{region}：停用模式停用时 {region}：停用：{mode} – 并包含该模式的具体操作。

{region}:create（region创建

{region}:create:{mode} – 以及包含此模式的特殊事件

{region}:render – 当该地区看到火灾时。

{region}:render:{mode} – 以及包含该模式的特殊事件。

{region}:activate – 在该区域中启用新模式时触发（输出后）。(); 获取表示的对象

mediaObj.open(); 打开上传器。

示例：

HTML：

<div class="avatar">
	<img  alt=""/>
	<input type="text" id="img" value=""/>
	<button class="upload">上传头像</button>
</div>

JS 代码：

jQuery(document).ready(function($) {
	var upload_avatar;
	$('body').on('click', '.upload', function(event){
		event.preventDefault(); 
		var boke8_net_box = $(this).parents('.avatar');
 
		if (upload_avatar) {
			upload_avatar.on('select', function() {
				var attachment = upload_avatar.state().get('selection').first().toJSON();
				boke8_net_box.find('#img').val(attachment.url).trigger('change');
				boke8_net_box.find('img').attr('src',attachment.url);
				boke8_net_box.find('.upload').text('修改头像');
			});
			upload_avatar.open();
			return;
		}
 
		upload_avatar = wp.media({
			title: '设置头像',
			button: {
				text: '插入'
			},
			multiple: false
		});
 
		upload_avatar.on('select', function() {
            var attachment = upload_avatar.state().get('selection').first().toJSON();
            boke8_net_box.find('#img').val(attachment.url).trigger('change');
			boke8_net_box.find('img').attr('src',attachment.url);
			boke8_net_box.find('.upload').text('修改头像');
        });
        upload_avatar.open();
	});
});

编译其余 PHP 数据代码。