WordPress调用媒体库组件wp.media上传图片视频文档等媒体文件

WordPress调用媒体库组件wp.media上传图片视频文档等媒体文件

小菜狗
2023-06-10 / 0 评论 / 115 阅读 / 正在检测是否收录...

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

mediaObj.open();

2. 处理上传或选择的媒体
在对象的 select 事件中调用 get() 事件:

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

3. 预选图片
打开媒体库时默认选择指定ID的图片,在对象的 open 事件中进行处理

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:

<div class="avatar">
    <img src="" 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代码操作了。

0

打赏

评论 (0)

取消