it-roy-ru.com

Невозможно получить предварительный просмотр загруженного изображения в пользовательском мета-поле

Я сначала следовал за шагами в этот урок . Добавил Image Uploader, попробовал, но я понял, что это старая версия WP Uploader ...

Тогда я нашел этот пост , и теперь мой загрузчик обновлен.

Проблема в том, что я не могу заставить работать изображение предварительного просмотра ...

Прежде всего, это раздел Image для деталей Meta Box //

case 'image':
$image = get_template_directory_uri().'/images/image.png';  
echo '<span class="custom_default_image" style="display:none">'.$image.'</span>'; 
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }      
echo '<label for="upload_image">
<input id="upload_image" name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" />
<img src="'.$image.'" class="custom_preview_image" alt="" />
<input id="upload_image_button" class="custom_upload_image_button button" type="button" value="Upload Image" /]
<a href="#" class="custom_clear_image_button">Remove Image</a> </label>'; break;

Это код, используемый для загрузчика //

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

    });
        jQuery('.custom_clear_image_button').click(function() {  
        var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();  
        jQuery(this).parent().siblings('.custom_upload_image').val('');  
        jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);  
        return false;  
    });  

});

Моя попытка добавить предварительный просмотр заключалась в использовании этих строк для JS //

     preview = jQuery(this).siblings('.custom_preview_image');  
        window.send_to_editor = function(html) {  
            imgurl = jQuery('img',html).attr('src');  
            classes = jQuery('img', html).attr('class');  
            id = classes.replace(/(.*?)wp-image-/, '');  
            formfield.val(id);  
            preview.attr('src', imgurl);  
            tb_remove();  
        }  
        return false; 

Поэтому мой вопрос будет таким: как я могу получить предварительный просмотр для моего Image Uploader внутри Custom Meta Box?

Вся помощь оценена, спасибо.

4
keilowe

Я вижу вашу проблему в JavaScript. Я сделал нечто подобное, используя событие on on объекта wp.media. Вы можете использовать "событие выбора", как вы это делаете на самом деле, но я бы использовал событие "при выборе" в основном для событий в модальном окне (но это просто предпочтение, вы можете использовать "при выборе", если хотите) ,.

Вот мой предложенный код JavaScript для вас.

  jQuery(document).ready(function($){
      var custom_uploader;
      $('#insert-video-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({
              title: 'Choose Image',
              button: {
                  text: 'Choose Image',
              },
              multiple: false,
             // If you pretent a function only for images you can limit the media elements only to images
             library : { type : 'image'}
         });

         //When close, grab the url of the image where needed
        custom_uploader.on('close', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
            $('.custom_preview_image').attr("src", attachment.url);
        });

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

Этот код должен работать с кодом HTML, который вы разместили в вопросе. Обратите внимание, что на самом деле это работает только для ОДНОГО изображения, если вы снова откроете окно выбора изображения и выберете новое изображение, предыдущее изображение будет заменено новым выбранным изображением.

1
cybmeta