¿Cómo puedo mostrar una vista previa de la imagen en el navegador sin cargar el archivo de imagen en el servidor?

Question

En mi aplicación quiero que cuando un usuario cargue un archivo de imagen, entonces quiero mostrarle al usuario la imagen inmediatamente antes de enviar el formulario. Esto es para que puedan obtener una vista previa de la imagen antes de enviar el formulario.

¿Hay alguna forma en HTML5 de que el cargador de archivos pueda mostrar la imagen en el lado del cliente antes de enviar el formulario real?

Quiero permitir al usuario obtener una vista previa del archivo de imagen sin cargar el archivo en el servidor (así que tampoco subirlo al directorio temporal), pero de alguna manera solo mostrar la imagen en el lado del cliente en el navegador del cliente.

Answer 1

Es posible con el HTML5 File API.

Answer 2

Dado que este fue el primer resultado para google("html5 image preview"), pensé que obtendría una respuesta con contenido. Espero que sea útil.

<img id="preview" src="placeholder.png" height="100px" width="100px" /> 
<input type="file" name="image" onchange="previewImage(this)" accept="image/*"/> 
<script type="text/javascript">  
    function previewImage(input) { 
    var preview = document.getElementById('preview'); 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
     preview.setAttribute('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } else { 
     preview.setAttribute('src', 'placeholder.png'); 
    } 
    } 
</script>