Cargar la ruta del archivo no se muestra en el campo usando wp media uploader

5 minutos de lectura

avatar de usuario
deemi-D-nadeem

estoy usando personalizado media upload en mi complemento. en mi anterior (before 4.0) WordPress versiones funciona perfectamente. Cuando subo un archivo de audio o imagen, se carga correctamente

ingrese la descripción de la imagen aquí

y cuando hago clic en "Insert Into Post" la ruta del archivo cargado que se muestra en el campo de texto.

ingrese la descripción de la imagen aquí

Pero cuando actualizo mi WordPress into 4.4.2 y cargue cualquier archivo su carga con éxito

ingrese la descripción de la imagen aquí

y cuando hago clic en “Insertar en la publicación”, la ruta del archivo cargado no se muestra en mi campo de texto.

ingrese la descripción de la imagen aquí

En ambos WordPress el código es 100% igual.

Aquí está mi código HTML:

<input type="text" size="50" name="mp3" id="mp3" class="upload-url" />
<input id="st_upload_button" class="st_upload_button" type="button" name="upload_button" value="Upload">

Y aquí está mi código Functions.php:

function pro_scripts_method() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');

    wp_register_script( 'custom-js', plugin_dir_url( __FILE__ )."js/custom.js");
    wp_enqueue_script( 'custom-js' );
}
add_action('admin_enqueue_scripts', 'pro_scripts_method');

Y aquí está mi código JS:

jQuery('.st_upload_button').click(function() {
    targetfield = jQuery(this).prev('.upload-url');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    fileurl = jQuery(html).attr('href');
    //alert(fileurl);
    jQuery(targetfield).val(fileurl);
    tb_remove();
}

yo alerta fileurl variable pero me da un valor indefinido. Así que por favor ayúdame a solucionar ese problema.

  • ¿Ha reiniciado el señor wamp o xamp?

    – Waqas_aamer

    11 de abril de 2016 a las 10:48

  • Estoy trabajando en mi servidor en línea.

    – deemi-D-nadeem

    11 de abril de 2016 a las 10:49

  • Tengo el mismo problema la semana pasada. La conexión de mi base de datos se desconectó y Wamp no funcionaba correctamente. Cuando reinicié todo estaba funcionando bien entonces.

    – Waqas_aamer

    11/04/2016 a las 10:50

  • hmmmm pero no estoy trabajando en local

    – deemi-D-nadeem

    11 de abril de 2016 a las 10:51

  • hermano, mi problema no es la base de datos. porque no vi la ruta del archivo cuando hice clic en “insertar en la publicación”, la inserción de la publicación está muy por encima del paso

    – deemi-D-nadeem

    11 de abril de 2016 a las 11:05

El cambio que hizo el nuevo WordPress en su carga de medios es el vacío URL del enlace campo.

ingrese la descripción de la imagen aquí

pero si haces clic file url debajo de ese campo y luego haga clic en Insert Into Post tu código funciona bien 🙂

Así que necesitamos una forma sencilla de poner automáticamente el file url valor en el URL del enlace. No sé si hay una configuración para eso en wordpress o no, pero hay un código simple que escribí en jQuery para lograrlo y me funciona muy bien.

Lo que realmente estoy haciendo es:

Cuando el usuario presiona el Insert into Post botón. Mi jQuery verifique el padre de eso Insert into Post botón y encuentra el file url valor e insertarlo en URL del enlace campo. ¡Eso es todo! ¿Simple verdad?

jQuery('.savesend input[type=submit]').click(function(){  
         var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
         var field = jQuery(this).parents('.describe').find('.urlfield');
         field.val(url);
     });

Así que pruébalo y cuéntame 🙂

¿Por qué no estás usando wp.media?

Prueba con esto:

jQuery(document).ready(function($) {
    "use strict";

    $('.st_upload_button').on('click', function(e){
        e.preventDefault();
        var $input_field = $(this).prev();
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Audio',
            button: {
                text: 'Add Audio'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
        });
        custom_uploader.open();
    });

});

Esto abrirá la pantalla de medios al hacer clic en el botón y colocará la URL en el campo de entrada.

  • hermano, ahora mi media up loader no se abre con tu código :'(

    – deemi-D-nadeem

    18 de abril de 2016 a las 5:05

  • Tendrás que modificar tu código. no necesitas tb_show(). Asegúrese de limpiar el código anterior antes de colocar el nuevo. Y esté atento a cualquier error en el inspector.

    – dingo_d

    18 de abril de 2016 a las 7:13

Su es una nueva versión del cargador de wordpress desde WordPress 3.5. Tal vez la forma en que lo hiciste no está disponible en WordPress 4.0

Puedes encontrar un tutorial básico aquí:
http://www.webmaster-source.com/

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


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //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({
            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
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

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

    });


});
<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>
//This part Should be in function.php (or similar)

add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

  • hola @jordane Hay dos fallas… si puedes arreglarlas… tu respuesta funcionará perfectamente para mí… o por favor arréglalo

    – deemi-D-nadeem

    21 de abril de 2016 a las 12:39

  • ¿A qué te refieres con dos fallos?

    – Jordane CURA

    21 de abril de 2016 a las 12:40

  • Primero, no puedo elegir ningún archivo adjunto anterior. Segundo, si subo un archivo nuevo y cuando hago clic tres veces en el botón “elegir imagen”, se muestra en el campo de entrada y tercero, tengo 2 campos de carga y sus botones con la misma identificación y nombre. llamo dos veces tu código jquery con diferente nombre e identificación

    – deemi-D-nadeem

    21 de abril de 2016 a las 12:45

¿Ha sido útil esta solución?