Vista previa de imágenes con JavaScript

Aquí un video mostrando el funcionamiento de esta funcionalidad. Mas adelante las instrucciones con imágenes y documentación para que puedas realizar el proyecto.

En otra publicación haré este mismo ejercicio solo que acortando la instrucciones y aplicando técnicas para que nus4etras instrucciones sean genéricas y fáciles de adaptar a otros proyectos.

Estoy para servirle, espero te se a de provecho esta información.

En esta entrada de Blog se explicará por medio de ejemplo una pequeña funcionalidad que tiene la capacidad de mostrar una vista previa de imágenes y mantener el control para incorporar, modificar y/o la eliminación de las imágenes que el usuario enviara posteriormente al servidor web.

Comenzamos

Para este ejercicio elementos HTML y JavaScript para que sea el navegador web el encargado de realizar todas las operaciones necesarias hasta que el usuario este seguro de que imágenes enviara, además da la posibilidad de revitalizar las imágenes seleccionadas.

1. Creamos cuatro elementos input file que estarán ocultos a la vista del para el usuario.
2 Creamos elementos visibles para el usuario con la cantidad de etiquetas para las imágenes que en este caso serna 4 imágenes

En esta imagen muestro todas las variables definidas y una buena explicación de como y para qué fueron declaradas.

Fue necesario aplicar un fondo para simular un fondo gris cuando el usuario no ocupara la sección con una imagen. Así que rellenamos la variable ficheros y la variable ruta. Recordemos que la variable fichero debe estar en sus cuatro índices de finida por lo que también se le da un estado inicial, pero con valor de cadena vacía a todos los indices.

En esta mostramos la instrucción que activa el input file que acepta múltiples ficheros de imagen.

En la siguiente imagen se nuestra la declaración de la instrucción para el evento change lo cual permite varios ficheros de imagen de manera simultanea.

La siguiente imagen muestra las instrucciones para agregar foros por separado.

La siguiente imagen muestra los eventos para eliminar por separado la imagen miniatura.

Por ultimo mostramos los eventos que se activan cuando activamos los eventos de agregar imágenes por separado que se encuentra anterio0rmrnte definida dos imágenes atrás.

Comentarios

janof1dom may 30, 03:23:00 p. m. GMT-4
muchas gracias master, usted sabe mucho, gracias por compartir su sabiduria
ResponderEliminar
Respuestas

Añadir comentario

Publicar un comentario

Su comentario es muy importante para mí.

Entradas populares de este blog

El entorno de los negocios

Esta es la entrega del temario del curso donde aprenderás: En este curso, aprenderás una variedad de habilidades y conocimientos esenciales para la gestión efectiva de organizaciones. Empezarás comprendiendo el proceso de gestión, lo que te permitirá trabajar una organización flexible, capaz de adaptarse a los cambios del entorno. Aprenderás a producir bienes y servicios de alta calidad, asegurando la satisfacción de los clientes. En cuanto a recursos humanos, te comprenderás la importancia de identificar y retener a los mejores empleados, así como en las estrategias para motivar y satisfacer a los equipos de trabajo. En el ámbito de la comercialización, adquirirás habilidades para construir relaciones sólidas con los clientes a través de un marketing eficaz, así como para fijar precios que satisfagan las necesidades del mercado y p...

Importancia de la asesoría académica

Los servicios de asesoría educativa emergen como una inversión sabia y enormemente beneficiosa. Ofrecen un acompañamiento personalizado que marca la diferencia tanto en el rendimiento académico como en el desarrollo personal de los estudiantes. Ya sea en sesiones individuales o grupales, estas tutorías proporcionan una oportunidad excepcional para alcanzar el máximo potencial. Imagina la vida cotidiana de un estudiante. En ocasiones, ciertas materias pueden parecer inalcanzables, ¿verdad? Es aquí donde la asesoría juega un papel crucial. Los profesionales no solo simplifican conceptos abstractos, sino que también ofrecen ejemplos prácticos que facilitan la comprensión. Este nivel de entendimiento puede marcar la diferencia entre la confusión y el dominio del tema. Visualiza el valor de tener a alguien a tu lado cuando te enfrentas a desafíos académicos importantes, como la preparación de un proyecto crucial o la preparación para un examen vital. Los servicios de asesoría te proporciona...

¿Que es MySql?

¿Que es MySql? MySQL es un sistema de administración de bases de datos que le permite administrar bases de datos relacionales. Es un software de código abierto respaldado por Oracle. Significa que puede usar MySQL sin pagar un centavo. Además, si lo desea, puede cambiar su código fuente para adaptarlo a sus necesidades. La forma oficial de pronunciar MySQL es My Ess Que Ell, no My Sequel. Sin embargo, puedes pronunciarlo como quieras, ¿a quién le importa? Ahora explicaremos que es la especificación SQL SQL 'sequel' Structured Query Language es un lenguaje específico de dominio usado en programación y diseñado para administrar datos almacenados en un sistema de administración de bases de datos relacionales (RDBMS), o para el procesamiento de flujos en...

Desplegar datos en pantalla con PHP y HTML5

Bienvenido a una nueva entrada de blog. En esta ocasión hablaremos de la salida de datos, usando PHP. Esta entrada tiene el propósito de mostrar la sintaxis básica de PHP con el objetivo que puedas comprender muchas de las entradas que publicaré en el futuro. Ya comprendimos como instalar el paquete para programar nuestras aplicaciones web usando un entorno de pruebas local usando las herramientas que nos proporciona XAMPP. Por cierto mi blog está enfocado al desarrollo de aplicaciones comerciales usando MySQL. PHP, JavaScript, CSS y HTML. Ya que se trabaja aplicaciones comerciales también tocaremos temas como lo son la administración de empresas, contabilidad, estadísticas, control de inventario y todo lo relacionado con la administración organizaciones comerciales. Ahora veamos salidas de datos y diferentes formas de desplegar en pantalla. Para comprender esto debemos tener conoc...

Aplicación web para un banco en línea

En esta entrada publico una vista previa de lo que es la aplicación que actualmente trabajo con estudiantes de análisis y desarrollo de aplicaciones web. Donde se trabaja actualmente con una aplicación que simula todas las actividades bancarias. La misma se desplegará en un servidor para a paso desde un principio hasta el final. Desde la interfaz la elaboración de la base de datos, maqueado diseño y reacciones dinámicas de la aplicación con JavaScript.

Elemento de formulario atributo {action}

En esta ocasión hablaré del atributo {action}, que en resumen solo contiene la URL que procesará los datos contenidos en el formulario. Puede ser muchos lenguajes los que procesen el formulario, sin embargo, tomaremos como ejemplo un script de PHP. Dicho esto podemos decir que el atributo {action} es propio del elemento {form} de HTML y es usado para enviar todo el contenido dentro del formulario. Aunque debes tener en cuneta de que solo los elementos {input} con atributo {type} y {neme} son enviados. Existe una buena cantidad de input type de lo que hablaremos más adelante. Por lo que te adelanto que estos son los elementos que vemos para la entrada de texto números y controles dentro de páginas web. Son elementos capaces de recoger datos a rais de entrada por el usuario por también ficheros de imágenes y mucho más. ...

¿Qué es el análisis de negocios?

¿Qué es el análisis de negocios? El Análisis de Negocio es el conjunto de tareas y técnicas utilizadas con el fin de entender la estructura, política y operaciones de una organización, para así recomendar soluciones que permitan a la misma alcanzar sus metas. Por lo que debemos considerar el estudio del tema, ya que de ello depende en su mayoría la toma de decisiones sobre los procedimientos, necesidades e implementación en la que incurre la empresa u organización. Además, las acciones que se deben considerar para alcanzar esas metas y objetivos. Para ello se debe tener en mente la implementación de una buena estrategia de recurso humano. Por lo general, las empresas que implementan análisis dentro de las mismas, son numerosas en cuanto al personal y el trabajo en equipo es muy importante a la hora de trabajar los objetivos definidos, análisis y reestructuración...

Introducción HTML

Esta entrada no está completada HTML es el Lenguaje de marcado estándar para crear páginas web. ¿Qué es HTML? HTML significa Idioma de Markup de Hyper Text HTML es el idioma de marcado estándar para crear páginas web HTML describe la estructura de una página web HTML consiste en una serie de elementos. Los elementos HTML le indican al navegador cómo mostrar el contenido Los elementos HTML etiqueta las piezas de contenido, como "Esto es un encabezado", "Este es un párrafo", "Este es un enlace", etc. ...

Instalación del paquete XAMPP

Bienvenido a una nueva entrada de blog donde aprenderás a instalar XAMPP lo cual trae incluido MariaDB. Puede que en la internet encuentres una gran cantidad de herramientas para trabajar con MariaDB. Sin embargo en mi blog intentaré usar las herramientas más sencillas e intuitivas para que logres crear aplicaciones web potentes. Por aquello de que serán comentarios negativos a cerca de las herramientas que usamos aquí. Permítame mencionar un refrán que se dice mucho en mi país "No es la flecha es el indio" ¡Comencemos! Para instalar XAMPP en Linux solo debes descargar el instalador e ir ar directorio donde los descargaste y abrir una terminal en ese mismo directorio. Entonces ejecutar los siguientes comandos Busca la versión de tu sistema operativo aquí https://www.apachefriends.org/es/download.html ...

Tutorías Online

Buscar este blog