WordPress的 - 使用媒体库获取图像 [英] Wordpress - Get an image using the media library

问题描述

我正在创建一个插件，我有一个管理页面

在该页面的选项中，我想添加一个按钮，允许我打开WordPress的媒体库，并从中选择一个图像，之后，获取所选图像的URL和 alt 属性。

如果可能，我该如何使用AJAX？

解决方案

首先，您需要将wordpress核心媒体脚本和自定义js脚本
$ b $ pre $ 函数my_enqueue_media_lib_uploader（）{

//核心媒体脚本
wp_enqueue_media（）;

//您的自定义js文件
wp_register_script（'media-lib-uploader-js'，plugins_url（'media-lib-uploader.js'，__FILE__），array（'jquery' ））;
wp_enqueue_script（'media-lib-uploader-js'）;
}
add_action（'admin_enqueue_scripts'，'my_enqueue_media_lib_uploader'）;


然后假设您在选项页面中有这个标记：上传按钮和文本输入所选图片网址

 < form method =post> 
< input id =image-urltype =textname =image/> 
< input id =upload-buttontype =buttonclass =buttonvalue =Upload Image/> 
< input type =submitvalue =Submit/> 
< / form> 
  

您需要添加此JavaScript代码才能调用上传程序弹出窗口

  jQuery（document）.ready（function（$）{
 
 var mediaUploader; 
 
 $（'点击（function（e）{
 e.preventDefault（）; 
 //如果上传者对象已经被创建，重新打开对话框
 if（mediaUploader）{ 
 mediaUploader.open（）; 
 return; 
} 
 //扩展wp.media对象
 mediaUploader = wp.media.frames.file_frame = wp.media （{
 title：'选择图片'，
按钮：{
 text：'选择图片'
}，倍数：false}）; 
 
 //选择文件时，抓取URL并将其设置为文本字段的值
 mediaUploader.on（'select'，function（）{
 attachment = mediaUploader.state（）。get（' （）; 
 $（'＃image-url'）。val（attachment.url）; 
}）; 
 // Open上传器对话框
 mediaUploader.open（）; 
}）; 
 
}）; 
  

一旦图片被选中，您的 image-url 输入将包含该网址并将保存在表单提交中。

I'm creating a plugin and i have an admin page

In the options of that page, i would like to add a button that allow me to open the Wordpress media library and select an image from it, after that, get the URL of the selected image and the alt attribute.

If it is possible, how can i do that using AJAX?

解决方案

First you would need to enqueue wordpress core media scripts and a custom js script

function my_enqueue_media_lib_uploader() {

    //Core media script
    wp_enqueue_media();

    // Your custom js file
    wp_register_script( 'media-lib-uploader-js', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array('jquery') );
    wp_enqueue_script( 'media-lib-uploader-js' );
}
add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');

Then let say you have this markup within your options page: an upload button and a text input to store the selected image url

<form method="post">
    <input id="image-url" type="text" name="image" />
    <input id="upload-button" type="button" class="button" value="Upload Image" />
    <input type="submit" value="Submit" />
</form>

You need to add this javascript code to invoke the uploader popup

jQuery(document).ready(function($){

  var mediaUploader;

  $('#upload-button').click(function(e) {
    e.preventDefault();
    // If the uploader object has already been created, reopen the dialog
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    // Extend the wp.media object
    mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });

    // When a file is selected, grab the URL and set it as the text field's value
    mediaUploader.on('select', function() {
      attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#image-url').val(attachment.url);
    });
    // Open the uploader dialog
    mediaUploader.open();
  });

});

Once the image is selected, your image-url input will now contain the url and will be saved on form submit.

这篇关于WordPress的 - 使用媒体库获取图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！