Foros del Web - Ver Mensaje Individual - Previsualizar imagen cargado con un type="file"

emprear · #2 (**permalink**) 21/01/2013, 18:13

Probá de no usar jQuery

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>HTML5 FileReader</title>
</head>
<body>
<form action="#" method="post" id="subearchivos">
    <input type="file" id="archivos" name="archivos" />
    <div id="vista_previa"><!-- miniatura -->Vista previa</div>
    <input type="submit" id="enviar" name="enviar" />
        <input type="button" value="cancelar"  style="display: none;" onclick="cancela('subearchivos');" id="resetear" />
</form>
    <script>
    if (window.FileReader) {
      function seleccionArchivo(evt) {
        var files = evt.target.files;
        var f = files[0];
        var leerArchivo = new FileReader();
        document.getElementById('resetear').style.display= 'block';
          leerArchivo.onload = (function(elArchivo) {
            return function(e) {
              document.getElementById('vista_previa').innerHTML = '<img src="'+ e.target.result +'" alt="" width="250" />';
            };
          })(f);
    
          leerArchivo.readAsDataURL(f);
      }
     } else {
      document.getElementById('vista_previa').innerHTML = "El navegador no soporta vista previa";
    }
    
      document.getElementById('archivos').addEventListener('change', seleccionArchivo, false);
      
      function cancela(elForm){
document.getElementById(elForm).reset();
if (window.FileReader) {
document.getElementById('vista_previa').innerHTML = "Vista Previa";
}else{
document.getElementById('vista_previa').innerHTML = "El navegador no soporta vista previa";
}
        document.getElementById('resetear').style.display= 'none';
      }
    </script>
    
 </body>
</html>

El mensaje vista previa bien puede ser una imagen.
El problema con esta api sigue siendo la compatibilidad, IE9 y Safari no la soportan, para algo 100% compatible necesitas subir la imagen al server y mostrarla, por ejemplo en un iframe oculto
SAludos