Use the WordPress Media manager

admin-script.js

/*
 * 
 * Code générique qui permet d'utiliser le gestionnaire de media de WordPress
 * 
 * Pour que ce code marche il faut ajouter le scripts de WordPress ( wp_enqueue_media() )
 * et respecter quelques régles pour le HTML ( voir les fichier exemple.php et functions.php )
 * 
 */

  var custom_uploader, name, input, size, preview;

  $(document).on( 'click', '.lur-media-upload', function(e) {
    e.preventDefault();

    name = $(this).data('input');
    input = $('input[name="'+ name +'"]');
    size = $(this).data('size');
    var preview_id = $(this).data('preview');
    if( preview_id === undefined ){
      preview = input.siblings('.lur-image-preview');
    } else {
      preview = $('#' + preview_id);
    }

    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        button: {
            text: 'Choisir cette image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {

        attachment = custom_uploader.state().get('selection').first().toJSON();
        input.val(attachment.id);

        // il y a toujours full comme size
        if( size === undefined || attachment.sizes[size] === undefined ){
          size = 'full';
        }

        attachmentUrl = attachment.sizes[size].url;
        attachmentWidth = attachment.sizes[size].width;
        attachmentHeight = attachment.sizes[size].height;


        // On affiche l'image pour que ca soit magique
        if( preview.find('img').length > 0 ){
            preview.find('img').attr({'src' : attachmentUrl, 'width' : attachmentWidth, 'height' : attachmentHeight });
        } else {

            preview.append('<img src="'+ attachmentUrl +'" width="'+ attachmentWidth +'" height="'+ attachmentHeight +'"/>');
        }

    });

    //Open the uploader dialog
    custom_uploader.open();
  });

exemple.php

<input name="lur-footer-logo-id" value="<?php esc_attr_e( $logo_id ); ?>" type="number" />

<?php
/*
 * data-input : le name de l'input qui recevra l'id de l'image
 * data-size : la taille de l'image pour la visualisation
 * data-preview : l'id du conteneur de la visualisation. Peut être omis si le containeur est un sibiling de l'input et posséde la class "lur-image-preview"
 */
?>
<button class="lur-media-upload button" data-input="lur-footer-logo-id" data-size="thumbnail"><?php _e('Ajouter/modifier l\'image') ?></button>

<div class="lur-image-preview">
    <?php
    if( $logo_id && $logo_id != 0 ){
      echo wp_get_attachment_image( $logo_id, 'thumbnail' );
    }
    ?>
</div>

functions.php

<?php
/**
 * Ajouts des scripts dans l'admin
 * 
 */
function lur_enqueue_color_picker( $hook_suffix ) {

    wp_enqueue_media();
    wp_enqueue_script( 'lur_admin_scripts', get_template_directory_uri() . '/js/admin-scripts.js', array(), false, true );
}
add_action( 'admin_enqueue_scripts', 'lur_enqueue_color_picker' );