Vista previa con input file

[quico5]

He encontrado estos dos scripts, me gusta la simpleza del primero pero no parece muy compatible al menos con chrome, el segundo me parece algo engorroso pero al basarse en jQuery parece mas fiable ¿es posible que el primero funcione en cualquier navegador moderno con algún ajuste? gracias

Código HTML:

<input type="file" onChange="document.imagen.src='file:///' + this.value">
<img src="imagen_defecto.png" name="imagen"> 

Código HTML:

<input id="file_url" type="file" name="foto">
<img id="img_destino" src="#" alt="Tu imagen">
<script>
function mostrarImagen(input) {
 if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function (e) {
   $('#img_destino').attr('src', e.target.result);
  }
  reader.readAsDataURL(input.files[0]);
 }
}
 
$("#file_url").change(function(){
 mostrarImagen(this);
});
</script> 

[Alexis88]

Pues, yo hice uno muy similar pero sin necesidad de echar mano de jQuery y funciona bien en Chrome, Opera y Firefox.



Pruébalo y dime cómo te fue, saludos.

[quico5]

El html se ve muy simple, y el css queda muy decorado, y ademas parece que el JS da soporte a multi-file, me gusta

[Alexis88]

Si gustas, úsalo y mejóralo, que para eso lo publiqué.

Saludos