Monday, January 14, 2019

Previsualizar imágenes antes de subir Oracle Apex / Preview an image before it is upload

En este post veremos cómo pre visualizar una imagen antes de guardarla en la base de datos usando el file browse.



Para esto la forma más sencilla que encontré es usando JavaScript y el archivo temporal que es cargado cuando usamos el control file browser.




El código original de ejemplo aqui. Link

Vamos al código en Apex:

En apex creamos nuestro page ítem file browser y creamos una acción dinámica JavaScript.





Dentro de JavaScript ponemos el siguiente código.


var reader = new FileReader();

    reader.onload = function (e) {
        $('#image_region')
            .attr('src', e.target.result)
            .width(150)
            .height(150);
    };

    reader.readAsDataURL(this.triggeringElement.files[0]);

En width y height pueden modificar a gusto el tamaño de la imagen que deseen mostrar.

En el control file browser donde dice post text agregamos:
Este código puede ser en cualquier otro ítem o sección donde queremos que se muestre la imagen.

<img id="image_region" src="#" alt="your image" />


Ejecutamos y tenemos nuestro pre visualización de imágenes.
Comentar que soporta diferentes formatos, gif, jpg. etc.



Aquí les dejo el link de demo.

https://apex.oracle.com/pls/apex/f?p=32431:27:112213966859102::NO:::

Y aprovecho en responder esta pregunta en stack-overflow.








Share:

0 comentarios:

Post a Comment

Subscribe to my Newsletter

Acerca de mi:

img

Ing. Angel O. Flores Torres, soy Ingeniero de Sistemas e Ingeniero de Aplicaciones Oracle Apex, he trabajado con Oracle Apex 5 y 5.1 desde el 2017, En los ultimos años he desarrollado habilidades en CSS, JavaScript, Jquery y PlSql , I specialize in Oracle APEX (Oracle Application Express )

Followers

Popular Posts