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:

<img id="image" width="400" height="400" />
<input type="file" name="imagen" id="upload">

1 2	<img id="image" width="400" height="400" /> <input type="file" name="imagen" id="upload">

Y el javascript:

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]);
};

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.

Leave a Reply Cancel reply