¿Visualizas la imagen seleccionada del sistema de archivos en el lado del cliente antes de cargar?

Question

Tengo una etiqueta de entrada en un formulario para seleccionar imágenes para cargar.

<div id="lowresDemo"> 
    <img src="some-url" /> 
</div> 
<input type="file" id="FileToUpload" name="FileToUpload" /> 

he intentado cambiar la una miniatura que aparece en el formulario junto a la entrada para afirmar al usuario de que su selección fue la intención con el siguiente código de jQuery:

$('#FileToUpload').change(function() { 
    $('#lowresDemo img').attr('src', $(this).val()); 
}); 

.. . Esto no funciona en ningún navegador, por razones de seguridad del navegador Creo (como recuerdo de la última vez que hice algo como esto hace años).

PREGUNTA:
¿Hay una manera de presentar la elección del usuario de la imagen antes de que se envíe el formulario - y no sólo la ruta de archivo + nombre del valor en el campo de entrada, pero una miniatura que muestra el archivo que ha seleccionado?

¿O la seguridad moderna del navegador evita esto?

Answer 1

Es posible con la API de archivos (IE no soporta la API de archivos)

<input type="file"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("input").change(function(e) { 

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) { 
     var file = e.originalEvent.srcElement.files[i]; 

     var img = document.createElement("img"); 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      img.src = reader.result; 
     } 
     reader.readAsDataURL(file); 
     $("input").after(img); 
    } 
}); 
    }); 
</script> 

Ejemplo de trabajo: http://jsfiddle.net/ugPDx/

Answer 2

No hay forma de realizar la operación antes de cargar la imagen.

Pero piense en ello de otra manera: al usuario "no le importa" si la imagen ya está cargada, podría mostrar la miniatura después de que se hayan cargado y mostrar una casilla de verificación de confirmación. Gmail hace esto con sus archivos adjuntos de correo electrónico: tan pronto como selecciona el archivo para adjuntar, comienza la carga. Pero el usuario siempre tiene la opción de desmarcar el archivo y no se incluirá en el correo electrónico.