web-dev-qa-db-fra.com

Plusieurs images avec Media Uploader sur le front-end

J'essaie d'implémenter un téléchargement multiple image sur un formulaire frontal à l'aide de Wordpress Media Uploader intégré.

J'ai réussi à envoyer une seule image, mais je ne peux pas savoir comment avoir des champs multiples images. Je suis très nouveau sur jQuery, malheureusement. Chaque fois que j'utilise plusieurs champs <input>, le bouton Upload Image ne fonctionne que sur le premier. L'aide est grandement appréciée.

C’est mon code de travail pour l’envoi d’une seule image, que j’essaie d’ajuster pour autoriser plusieurs envois <input> de champs/images.

formulaire frontal html 

<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>

media-uploader.js 

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();

    });


});

dans functions.php 

add_action('wp_enqueue_scripts', 'media_uploader_script');
function media_uploader_script() {
    if (is_page_template('page-item-submission.php')) {
        wp_enqueue_media();
        wp_register_script('media-uploader-js', get_template_directory_uri().'/assets/js/media-uploader.js', array('jquery'));
        wp_enqueue_script('media-uploader-js');
    }
}

Voici une capture d'écran de ce que j'essaie de mettre en œuvre (je sais que le bouton "Ajouter davantage" est un autre type de "problème").enter image description here

MODIFIER:

Voici ce que j'ai obtenu avec l'aide de Steven Jones:

media-upload.js 

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

    var custom_uploader;

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

     var target_input = $(this).attr('id');

        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();
    $('input[name=' + target_input + ']').val(attachment.url);
});

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

    });


});

formulaire frontal html 

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="upload_image_button" type="button" value="Upload Image" />

Cependant, seul l'un des deux champs est rempli avec l'entrée que je choisis dans l'utilitaire de téléchargement de média. Exemple: je clique sur le deuxième bouton (image_2) en premier, une URL est renseignée dans ce champ. Ensuite, je clique sur le premier bouton (image_1): l'URL de la pièce jointe est maintenant renseignée dans le deuxième champ, même si elle doit être insérée dans le premier champ ... cela n'a aucun sens.

imagesjqueryuploads
1
SPi

Vous ne pouvez pas avoir deux boutons avec le même identifiant (#upload_image_button) car les identifiants sont supposés être uniques.

Vous devez attribuer une classe aux boutons et attribuer un ID égal à celui du nom de l’entrée associée.

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="button upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="button upload_image_button" type="button" value="Upload Image" />

Ensuite, dans votre JS, vous devez déclencher wp_media avec la classe du bouton.

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

Lorsque le bouton est cliqué, vous devrez alors obtenir l'ID du bouton sur lequel vous cliquez.

var target_input = $(this).attr('id');

Ensuite, lorsque l'image sera renvoyée par le programme de téléchargement, vous devrez renseigner la bonne entrée avec la valeur:

custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('input[name=' + target_input + ']').val(attachment.url);
});

J'espère que cela pourra aider.

1
Steven Jones