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

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

0 голосов
/ 07 сентября 2018

Я новичок в 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.'">

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

1 Ответ

0 голосов
/ 07 сентября 2018

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

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

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.'">
...