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()方法：
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 ] : []); }); }); |
事件：
- ready – DOM加载完成时触发
- attach – 上传组件的$el追加到DOM时触发
- open – 媒体窗口打开时触发
- escape – 组件通过转义键关闭时触发
- close – 关闭时触发
- select – 选择媒体文件时触发
- activate – 状态激活时触发
- {region}:deactivate – 在区域上禁用模式时激发
- {region}:deactivate:{mode} – 以及包括该模式的更具体的事件。
- {region}:create（region创建
- {region}:create:{mode} – 以及包括该模式的更具体的事件
- {region}:render – 当区域准备好渲染其视图时激发。
- {region}:render:{mode} – 以及包括该模式的更具体的事件。
- {region}:activate – 在区域上激活新模式（在渲染后）时激发。
- {region}:activate:{mode} – 以及包括该模式的更具体的事件。
方法：
- mediaObj.state(); 获取表示当前状态的对象。
- mediaObj.lastState(); 获取一个表示先前状态的对象。
- mediaObj.open(); 打开上传器。
示例：
HTML:
1 2 3 4 5 |
|
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代码操作了。
© 版权声明
转载请注明来自白芸资源网以及原文地址。
本站不敢保证内容的可靠性，内容仅供小范围学习与参考，禁止用于商业、盈利或其它非法用途以及大范围传播，您需在学习与参考完毕后从您的个人存储空间彻底删除，因您滥用而造成的损失本站不承担法律责任。
本站部分内容可能源于互联网，版权争议与本站无关，如有侵权可联系站长处理，敬请谅解！
请您合法使用本站资源。
THE END
