如何通过Wordpress Media Uploader访问我上传的图像?

时间:2013-06-12 16:06:35

标签: php jquery wordpress

这是我第一次尝试在我的主题中使用Wordpress Media Uploader,但我很难访问我上传的图片
以下是问题:我可以上传我的图片,但我不知道如何检索它们

例如,当我点击我的上传按钮时,它会上传我的图像,但我的文本字段是空白的(它应该显示我上传的图像的路径)所以我可以在我的主题中使用它像这样:
<?php echo $options['body_background'];?>

我在 options-page.php 中的功能看起来像这样:

//Heading Text (works fine and i can echo value out...)
function text_heading_setting(){
$options = get_option('plugin_options');
$get_options = $options['text_heading'];
echo '<input type="text" name="plugin_options[text_heading]" value="'.$get_options.'" >';
}

 //Menu Image upload field (can upload image but can't echo its path)
 function body_background_setting(){
 $options = get_option('plugin_options');
 $get_options_menu = $options['menu_background'];
 echo '<div class="uploader">
    <input type="text" name="plugin_options[menu_background]" id="menu_image_bg" value="'.$get_options_menu.'" />
    <input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
    </div>';
    }


   //Body Image upload field (can upload image but can't echo its path)
   function body_background_setting(){
   $options = get_option('plugin_options');
   $get_options_body_bg = $options['body_background'];
   echo '<div class="uploader">
   <input type="text" name="plugin_options[body_background]" id="menu_image_bg" value="'.$get_options_body_bg.'" />
   <input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
   </div>';
   }

上传者js 如下所示:

jQuery(document).ready(function($){
 var _custom_media = true,
  _orig_send_attachment = wp.media.editor.send.attachment;

 $('.button').click(function(e) {
 var send_attachment_bkp = wp.media.editor.send.attachment;
 var button = $(this);
 var id = button.attr('id').replace('_button', '');
 _custom_media = true;
 wp.media.editor.send.attachment = function(props, attachment){
  if ( _custom_media ) {
    $("#"+id).val(attachment.url);
  } else {
    return _orig_send_attachment.apply( this, [props, attachment] );
  };
}

wp.media.editor.open(button);
return false;
});

$('.add_media').on('click', function(){
_custom_media = false;
});
});

我的问题截图: http://vasinternetposao.com/wordpressdevelopment/imgupload.png
有人可以帮助我,以便我可以访问我上传的图像吗?

1 个答案:

答案 0 :(得分:2)

尝试将esc_url()添加到值

//Menu Image upload field (can upload image but can't echo its path)
 function body_background_setting(){
 $options = get_option('plugin_options');
 $get_options_menu = $options['menu_background'];
 echo '<div class="uploader">
    <input type="text" name="plugin_options[menu_background]" id="menu_image_bg" value="'.esc_url($get_options_menu).'" />
    <input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
    </div>';
    }


   //Body Image upload field (can upload image but can't echo its path)
   function body_background_setting(){
   $options = get_option('plugin_options');
   $get_options_body_bg = $options['body_background'];
   echo '<div class="uploader">
   <input type="text" name="plugin_options[body_background]" id="menu_image_bg" value="'.esc_url($get_options_body_bg).'" />
   <input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
   </div>';
   }