Magento 2: Как отобразить миниатюру изображения при загрузке изображения без компонента пользовательского интерфейса

Question

Magento 2: Как отобразить миниатюру изображения при загрузке изображения без компонента пользовательского интерфейса

Я хочу отобразить предварительный просмотр/миниатюру изображения в соответствии с упоминанием в изображении, когда я загружаю изображение в панель администратора. Как это возможно без ui_component?

Пожалуйста, помогите мне.

Заранее благодарю :)

$image11 = $fieldset->addField(
        'image',
        'image',
        [
            'name' => 'image',
            'label' => __('Background Image'),
            'title' => __('Background Image'),
            'tabindex' => 1,
            'onchange' => 'imagechange(this)',
        ],'text'
        );

Я использовал зависимость в этой области..когда я выберу изображение фонового типа, появится поле фонового изображения. Но метка "фоновое изображение" не скрывается из-за "after_element_html". Как я могу скрыть "Фоновое изображение" использование метки с использованием 'after_element_html'

1

magento2 image-upload adminhtml uicomponent

Author: Rohan Hapani, 2017-04-10

Source

1 answers

score 0 · Accepted Answer

Вы можете получить вывод следующим образом:

$image11 = $fieldset->addField(
        'image',
        'image',
        [
            'name' => 'image',
            'label' => __('Background Image'),
            'title' => __('Background Image'),
            'tabindex' => 1,
            'onchange' => 'imagechange(this)',
        ],'text'
        );

После того, как вы сможете установить с помощью функции изменения изображения и отобразить миниатюру изображения при загрузке:

function imagechange(input)
{
    require(['jquery'], function($)
    {
        $('#preimage').remove();
        var table_html = "<img alt='' width='22' height='22' id='preimage' name='preimage'>";
        $('#page_image').before(table_html);
        if (input.files && input.files[0]){
            var reader = new FileReader();
            reader.onload = function (e){
                jQuery('#preimage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    });
}