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.

Published by Angel O. Flores Torres

System engineer, Applications engineer, working with C# and Oracle Apex 5, 5.1 since 2017. I specialize in Oracle APEX (Oracle Application Express )

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: