Wordpress Media Uploader正确注册并排队javascript

Question

I have the following function to open the Wordpress Media Uploader within the main php file of a Wordpress plugin. The problem is getting the javascript to fire:

function media_uploader_enqueue() {
    wp_enqueue_media();
    wp_register_script( 'media-uploader', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array( 'jquery', NULL, false ) );
    wp_enqueue_script( 'media-uploader');
}
add_action( 'admin_enqueue_scripts', 'media_uploader_enqueue');

and the following in media-lib-uploader.js

jQuery(document).ready(function($){
var mediaUploader;

$('#upload_image_button').click(function(e) {
e.preventDefault();
  if (mediaUploader) {
  mediaUploader.open();
  return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
  title: 'Choose Image',
  button: {
  text: 'Choose Image'
}, multiple: false });
mediaUploader.on('select', function() {
  var attachment = mediaUploader.state().get('selection').first().toJSON();
  $('#background_image').val(attachment.url);
});
mediaUploader.open();
});
});

This is the html for the settings page:

<input type="text" id="background_image" name="background_image" value="<?php echo get_option('background_image'); ?>" /><input id="upload_image_button" class="button" type="button" value="Upload Image" />

I cannot find the error within the code. I have even tried;

wp_deregister_script

Have I registered and enqueued the javascript correctly? Or is there a problem with the javascript itself?

Answer 1

Fixed the issue once I defined this function ahead of all others in my main plugin php file. Simple!