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

Entradas populares de este blog

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.

Lee mas »

HTMLElement.accessKey

Presione dos veces en el texto para leer, después de haber activado la funcionalidad si estás desde un móvil. Si estás desde un ordenador puedes hacer doble clic en los textos de esta entrada para leerlos. Nota: Más adelante se actualizará la entrada y mostraremos el mensaje para dispositivos móviles usando JavaScript para detectar el dispositivo que visita la página web. En esta entrada hablaré sobre el atributo {accesskey} de HTML5. Este atributo da la posibilidad de brindar al usuario realizar acción en un elemento de HTML. Por esta razón analizaremos las posibilidades que tenemos para que esta acción realmente, beneficie al usuario. Como de costumbre publico definiciones de atributos, funciones, mét

Lee mas »

Formulario HTML attribute: accept-charset

Definición del atributo {accept-charset} de HTML5. En esta ocasión he realizado una investigación de los parámetros que podemos pasar a este atributo. La definición a continuación que nos brinda MDN dice: accept-charset Codificaciones de caracteres separadas en el espacio El servidor acepta. El navegador los usa en el orden en que se enumeran. El valor predeterminado significa la misma codificación que la página. (En versiones anteriores de HTML, las codificaciones de caracteres también podrían ser delimitadas por comas). Sin embargo, carece de enlaces para ver detalles sobre la implementación del atributo y más sobre el tema. Un análisis importante es que podemos definir la codificación de caracteres diferentes al resto de la página web o aplicación en la que estemos trabajando. Esto solo para casos específicos. También debemos recordar que

Lee mas »

Efectos CSS con Izmir Hover Effects

Mira que bellos estos efectos con una librería CSS llamada Izmir Hover Effects Pasa el ratón sobre las imágenes o haz clic sobre ellas si etas en el móvil Mi avatar. Mi avatar.

Lee mas »

HTML / Atributos

Atributos / HTML Nombre del atributo Descripción Estado de revisión accept Lista de tipos que acepta el servidor, normalmente un tipo de archivo. Puedes encontrar una entrada con ejemplo en este blog aquí Formulario HTML attribute: accept

Lee mas »

JavaScript Array

Follow @codefuncode En esta ocasión les traigo algo muy sencillo. Se trata de cómo definir una matriz y acceder a sus valores. Recordemos que las matrices tienen valores de acuerdo a su índice. O sea que una matriz puede tener distintos valores y para encontrarlos debemos especificar el índice en que se encuentra. A continuación un ejemplo de cómo definir una matriz y acceder a sus valores. Un Aray en JavaScript es un objeto. Básicamente, todo es un objeto en JavaScript. Por lo que cuando estés avanzado con este lenguaje verás que en ocasiones deberás buscar el objeto en sí, ya que muchos de los objetos tienen métodos ya definidos por defecto y en otras ocasiones tienen métodos que no conocemos, porque en la internet no se habla mucho de ellos. Más adelante hablaré muchos detalles sobre esto. Más adelante hablaremos de matrices asociativas y mucho más. Por ahora veamos esto.

Lee mas »

Atributo accept de HTML

En esta ocasión hablaré del atributo {accept=" "} de HTML. A modo de introducción este atributo hace referencia al tipo de archivos que permitimos al usuario insertar en un input type="file" Ahora comenzamos con la descripción y una lista de parámetros que en teoría deberían ser válidos para aplicaciones web. Sin embargo, es necesario hacer pruebas en los navegadores más usados para comprobar la compatibilidad. Este atributo recibe como parámetro de tipo {MIME types} por lo que podemos ir a esta referencia y deberían funcionar. Estos son los tipos más comunes, sin embargo, hay una listas más completas, pero no asegura la compatibilidad. Por otro lado, no es aconsejable permitir a los usuarios subir archivos de tipo ejecutaba o que puedan ejecutarse de alguna forma. El atributo {accept=" "}, toma como su valor una lista separada

Lee mas »

Código Divertido

Buscar este blog