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:
Dentro del formulario añadiremos nuestro input de tipo archivo:
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.
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
¿Buscas trabajo de programador?
11 respuestas a “Campo de archivo con vista previa”
Deja una respuesta
170 artículos que te podrían interesar
Ver más sobre
Hola, gracias por tu tiempo Jose, porias decirme el nombre de algun plugin de wordpress que haga la misma funcion?
mil gracias de antemano!
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
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
Hola,
Una solución rápida es que al input que permite la subida de archivo le pongas el atributo required.
SAludos
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!
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…
Hola,
Si, existen varios pero son muy pesados.
Saludos
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
Hola,
Dejaré el tema abierto por si alguien lo sabe.
Saludos
Como le pondría un botón para borrarla?
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