也想出现在这里?联系我们

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

2023.09.21 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress中使用wp.media来上传图片、视频、文档等媒体文件,你可以按照以下步骤进行操作:

  1. 在你的WordPress主题或插件中添加JavaScript代码:首先,在你的WordPress主题或插件中添加JavaScript代码,以便在需要时调用wp.media媒体库组件。你可以将这些代码添加到你的主题的functions.php文件中或者在合适的地方加载JavaScript文件。

    jQuery(document).ready(function($) {
       // 添加一个按钮,当用户点击它时触发媒体库
       $('#upload-button').on('click', function(e) {
           e.preventDefault();
           // 打开媒体库
           var mediaUploader = wp.media({
               frame: 'select',
               title: '选择媒体文件',
               multiple: false, // 是否允许多选
               library: { type: 'image,video,audio,document' } // 允许的媒体类型
           });
    
           // 当媒体库中选择了媒体文件后执行的回调函数
           mediaUploader.on('select', function() {
               var attachment = mediaUploader.state().get('selection').first().toJSON();
               // 在这里处理所选媒体文件的数据,可以将它们插入到编辑器中或保存到数据库中
               console.log(attachment);
           });
    
           // 打开媒体库对话框
           mediaUploader.open();
       });
    });
  2. 创建一个按钮来触发媒体库:在你的HTML代码中,创建一个按钮或链接,用于触发媒体库的弹出窗口。在上面的JavaScript代码中,我们使用了按钮的ID为upload-button,所以确保HTML中的按钮ID与之匹配。

  3. 处理所选媒体文件的数据:在mediaUploader.on('select', function() {...}回调函数中,你可以处理所选媒体文件的数据。例如,你可以将它们插入到编辑器中,或者将它们保存到数据库中,具体取决于你的需求。

这样,当用户点击上传按钮时,将会弹出一个媒体库对话框,允许他们选择并上传媒体文件。一旦选择了文件,就会触发回调函数,你可以在其中处理所选媒体文件的信息。

请注意,你可以根据自己的需求自定义媒体库的参数,例如允许多选、限制媒体类型等等。在上面的示例中,我们使用了一些常见的选项来帮助你入门。

有用0
  • 2023.09.21初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧