WordPress开发：用wp.media轻松搞定媒体上传

WordPress主题或插件应用开发中经常会有图片、视频、文档等媒体文件的上传功能需求，如果开发者自主编写媒体上传组件需要付出不少时间和精力一起看，但是通过调用WordPress自带的媒体库组件则事半功倍，只需要编写简单的js代码即可拥有强大的媒体上传功能。

wp.media代码参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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、触发wp.media使用open()方法：

1

mediaObj.open();

2、处理上传或选择的媒体

在对象的 select 事件中调用get()事件：

1
2
3
4

mediaObj.on('select', function(){
	//处理代码
	var selectImg = mediaObj.state().get('selection'); //重要，获取已选媒体信息
});

3、预选图片

打开媒体库时默认选择指定ID的图片一起看博客，在对象的 open 事件中进行处理

1
2
3
4
5
6
7
8

mediaObj.on('open', function(){
	var defaultPostID = [1,2,3]; //默认附件ID	
	var selectImg = mediaObj.state().get('selection'); //获取已选择图片的数据	
	defaultPostID.forEach(function(imgID){ //编辑默认附件ID
		var getAttachment = wp.media.attachment(imgID); //根据ID获取
		selectionAPI.add( getAttachment ? [ getAttachment ] : []);
	});	
});

事件：方法：示例：HTML:

1
2
3
4
5

 class="avatar">
	 src="" alt=""/>
	 type="text" id="img" value=""/>
	 class="upload">上传头像>
>

JS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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代码操作了。