Magento 2: How to display thumbnail of the image when upload image without ui_component

Question

I want to display preview/thumbnail of the image as per mention in image when i upload image in admin panel. How it is possible without ui_component?

Please help me.

Thanks in advance :)

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

I used dependency in this field..when I select background type image, then background image field will be show . But 'background image' label is not hide because of 'after_element_html'. How can i hide 'Background Image' label use with the use of 'after_element_html'

Answer 1

You can get output like this :

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

After you can set with help of imagechange function and display image thumbnail of the image when upload :

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]);
        }
    });
}