Cómo obtener una vista previa de la imagen cargada en el formulario de módulo personalizado

Question

Estoy aprendiendo magento y tratando de hacer un módulo para administrar a los chefs en un restaurante.Creé un botón de carga para subir la imagen y funciona (imágenes Guardar en el directorio, nombre de archivo guardado en la base de datos).

Pero no sé cómo tener una pequeña vista previa de la imagen junto al botón cuando se ha cargado la imagen (como cuando cargue la imagen del catálogo).En este momento, cuando haga clic en "Editar" para editar una información de chef, el campo de la imagen se parece igual si ya cargué la imagen o no.

Aquí está mi campo:

 $fieldset->addField('image_url', 'image', array(
        'label'     => Mage::helper('tressympa_cheflist')->__('Profile Picture'),
        'required'  => false,
        'name'      => 'image_url',
    ));

¿Alguna sugerencia?Muchas gracias!

Answer 1

Guardar nombre de la imagen con su ruta completa.

media/{yourfolder}/imagename.jpg

Guardar en la base de datos con yourfolder/imagename.jpg

Se mostrará automáticamente en el formulario de edición.

o

Puede haber hecho el campo y mostrar la imagen

$fieldset->addField('image_url', 'image', array(
        'label'     => Mage::helper('tressympa_cheflist')->__('Profile Picture'),
        'required'  => false,
        'renderer' => 'modulename/adminhtml_modulename_renderer_image',
        'name'      => 'image_url',
    ));

Añadir su bloque de archivos / adminhtml / modulename / renderer / image.php

 <?php
    class NameSpace_ModuleName_Block_Adminhtml_ModuleName_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract{
       public function render(Varien_Object $row)   {
            $html = '<img id="' . $this->getColumn()->getId() . '" src="'.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).$row->getData($this->getColumn()->getIndex()) . '"';
            $html .= '/>';
            return $html;
        }
    }
    ?>

Answer 2

Puede lograr esto si guarda su imagen en la carpeta predeterminada media en lugar de media/{yourfolder}/imagename.jpg como Cambiar la ruta de la imagen

media/{yourfolder}/imagename.jpg => media/imagename.jpg