Previsualizar imagen antes de subirla con Javascript y Html5
Un detalle que tienen muchas webapps y sitios web que es muy útil es la posibilidad de previsualizar una imagen antes de subirla:
Gracias a las api File de Html5 esto es algo muy sencillo de hacer. Primero veamos el markup de html, que es muy simple:
Html:
|
1 2 |
<img id="image" width="400" height="400" /> <input type="file" name="imagen" id="upload"> |
Y el javascript:
|
1 2 3 4 5 6 7 8 9 10 11 |
document.getElementById("upload").onchange = function() { var reader = new FileReader(); //instanciamos el objeto de la api FileReader reader.onload = function(e) { //en el evento onload del FileReader, asignamos el path a el src del elemento imagen de html document.getElementById("image").src = e.target.result; }; // read the image file as a data URL. reader.readAsDataURL(this.files[0]); }; |
En este link pueden ver el código en acción.