it-swarm.com.de

Mehrere Bilder mit Media Uploader im Frontend

Ich versuche, einen Mehrfach Bild-Upload in einem Frontend-Formular mithilfe des integrierten Wordpress Media Uploader zu implementieren.

Es ist mir gelungen, ein einzelnes Bild hochzuladen, aber ich kann nicht herausfinden, wie ich mehrere Bildfelder haben soll. Ich bin leider sehr neu bei jQuery. Wenn ich mehrere <input>-Felder verwende, funktioniert die Upload Image-Schaltfläche nur für das erste. Hilfe wird sehr geschätzt.

Dies ist mein Arbeitscode für den Upload eines einzelnen Bildes, den ich so anzupassen versuche, dass mehrere <input> Felder/Bilder hochgeladen werden.

HTML-Frontend-Formular

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

    });


});

in 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');
    }
}

Hier ist ein Screenshot von dem, was ich zu implementieren versuche (ich weiß, dass die Schaltfläche "Weitere hinzufügen" eine andere Art von "Problem" ist).enter image description here

BEARBEITEN:

So weit bin ich mit Steven Jones Hilfe gekommen:

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

    });


});

HTML-Frontend-Formular

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

Allerdings wird nur eines der beiden Felder mit Eingaben gefüllt, die ich vom Medien-Uploader auswähle. Beispiel: Ich klicke zuerst auf die zweite Schaltfläche (image_2). In dieses Feld wird eine URL eingetragen. Danach klicke ich auf den ersten Button (Bild_1): Die URL des Anhangs wird nun in das zweite Feld eingetragen, obwohl sie in das erste Feld gehen muss ... das macht keinen Sinn.

1
SPi

Sie können nicht zwei Schaltflächen mit derselben ID (#upload_image_button) haben, da IDs eindeutig sein sollen.

Sie sollten den Schaltflächen eine Klasse zuweisen und die ID dem Namen des zugehörigen Eingangs zuordnen.

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

Dann sollten Sie in Ihrem JS wp_media durch die Klasse des Buttons auslösen.

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

Wenn Sie auf die Schaltfläche klicken, müssen Sie die ID der Schaltfläche ermitteln, auf die Sie geklickt haben

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

Wenn das Bild vom Uploader zurückgegeben wird, müssen Sie die richtige Eingabe mit dem Wert füllen:

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

Hoffentlich hilft das.

1
Steven Jones