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.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(9 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

11 respuestas a “Campo de archivo con vista previa”

  1. felipe gonzalez dice:

    Hola, gracias por tu tiempo Jose, porias decirme el nombre de algun plugin de wordpress que haga la misma funcion?
    mil gracias de antemano!

    • Jose Aguilar dice:

      Hola Felipe,

      Lamento decir que no conozco ningún plugin de WordPress con estas características.

      Si no lo encuentras, me gustaría hacerte saber que podemos hacerte el plugin que necesites a medida. Tan solo tienes que enviar todos los detalles de tu requisito a nuestro centro de soporte técnico ubicado en:

      https://www.jamodules.com/es/soporte

      Saludos

  2. carmen dice:

    el codigo del ejemplo me funciona muy bien gracias.
    pero quiero que estas imagenes subidas se guarden en una carpeta y que la seleccion se imagenes sea obligatoria
    como puedo hacer eso ayuda por favor

  3. Esteban dice:

    Hola José, que sería la variable que le estas pasando por parámetro a la función?
    Podrías explicar algo más el código de esa función?
    Gracias!

  4. Stefanía Ramírez dice:

    Hola José, sabes si hay algún plugin que ya tenga esta función? también quisiera mostrar el texto que se está insertando en algunos de los campos del formulario en una posición específica sobre la imagen…

  5. Dixon Eduardo Zamora Torres dice:

    Saludos, excelentes aportes los que haces, te comento quiero contar el numero de paginas de un documento cargado con input file ya sea de word pdf o power point. Con javascript

  6. Mauricio Conde dice:

    Como le pondría un botón para borrarla?

    • Jose Aguilar dice:

      Hola,

      La posibilidad de eliminarla se puede programar tambien. Puedes agregar un botón que al pulsaro ejecute una llamada ajax para hacer la eliminación del servidor. En el success del ajax hacer el efecto de borrado que te gustaría.

      Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre