Как я могу использовать WordPress Media Uploader с кнопкой загрузки нескольких изображений

Я новичок в jQuery, кнопка загрузки нескольких изображений с помощью WordPress Media Uploader не работает, мне нужно знать, как это сделать правильно.

Вот мой код: Javascript/jQuery Для отображения загрузчика мультимедиа и обработки выбранных изображений:

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

var mediaUploader;

$('#upload-button').on('click',function(e) {
    e.preventDefault();
    if( mediaUploader ){
        mediaUploader.open();
        return;
    }

  mediaUploader = wp.media.frames.file_frame =wp.media({
    title: 'Choose a Hotel Picture',
    button: {
        text: 'Choose Picture'
    },
    multiple:false
  });

  mediaUploader.on('select', function(){
    attachment = mediaUploader.state().get('selection').first().toJSON();
    $('#profile-picture').val(attachment.url);
    $('#profile-picture-preview').css('background-image','url(' + attachment.url + ')');
  });
  mediaUploader.open();
}); });




<input type="button" id="upload-button1" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture.'">

<input type="button" id="upload-button2" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture.'">

Любая помощь, как всегда, приветствуется.


javascript wordpress jquery media multifile-uploader
person Noufal Binu    schedule 07.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно просто изменить ID на Classes для ваших селекторов, чтобы загрузчик мультимедиа можно было использовать на разных кнопках.

Затем вам нужно будет создать идентификатор, чтобы использовать правильный входной файл для установки изображения. В моем случае я использовал атрибут данных.

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

var mediaUploader;

$('.upload-button').on('click',function(e) {
    e.preventDefault();
    var buttonID = $(this).data('group');

    if( mediaUploader ){
        mediaUploader.open();
        return;
    }

  mediaUploader = wp.media.frames.file_frame =wp.media({
    title: 'Choose a Hotel Picture',
    button: {
        text: 'Choose Picture'
    },
    multiple:false
  });

  mediaUploader.on('select', function(){
    attachment = mediaUploader.state().get('selection').first().toJSON();
    $('#profile-picture'+buttonID).val(attachment.url);
    $('#profile-picture-preview'+buttonID).css('background-image','url(' + attachment.url + ')');
  });
  mediaUploader.open();
}); });




<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="1">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture1.'">

<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="2">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture2.'">
person Alecadddd    schedule 07.09.2018