Campo de archivo con vista previa

Quizás en alguna ocasión te has visto en la necesidad de colocar en tus formularios un campo de archivo para subir una o varias imágenes. En este artículo vamos a explicar un ejemplo práctico de como crear unos inputs o campos de archivo que dispongan de vista previa para mostrar al usuario que imagen está subiendo sin necesidad de utilizar ningún plugin.

Dentro del <body> declararemos nuestro formulario tal como solemos hacer cuando se desean subir ficheros:

<form action="index.html" method="post" enctype="multipart/form-data">
...
</form>

Dentro del formulario añadiremos nuestro input de tipo archivo:

<label>Image 1</label>
<input id="uploadImage1" type="file" name="images[1]" onchange="previewImage(1);" />

Es importante ver que nuestro input tiene un identificador, un name y un evento “onchange” donde estamos llamando a nuestra función pasándole un parámetro que servirá para saber que imagen previsualizaremos.

En el name hemos puestos “images[1]” porque en nuestro ejemplo se trata de subir 3 imágenes. Lo declaramos como array.

Ahora allí donde deseemos añadiremos nuestra imagen con una imagen por defecto:

<img id="uploadPreview1" width="150" height="150" src="images/image_not_available.jpg" />

Fíjate bien que nuestra imagen tiene un identificador que será clave en la función que declararemos a continuación.

Ya tenemos los elementos. La clave del asunto radica en el JavaScript. Vamos a crear una función donde usamos la clase FileReader de JavaScript para mostrar la previsualización. Para ello, tan solo necesitaremos añadir el siguiente código en un archivo .js o en nuestro <head>:

function previewImage(nb) {        
    var reader = new FileReader();         
    reader.readAsDataURL(document.getElementById('uploadImage'+nb).files[0]);         
    reader.onload = function (e) {             
        document.getElementById('uploadPreview'+nb).src = e.target.result;         
    };     
}

En el ejemplo que tenemos disponible es posible añadir 3 imágenes con su previsualización.

Ver ejemplo en funcionamiento

Conoces alguna otra solución para implementar esta funcionalidad de forma más sencilla? No dudes en enviar tu comentario.

Si te ha servido este tutorial no dudes en hacer fan de la página de facebook del blog Jose Aguilar y seguir nuestra novedades.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*