Come visualizzare l’immagine selezionata senza inviare dati al server?

Sto cercando di mostrare al cliente un’immagine che ha selezionato:

 

Ma non riesco a leggere il valore dell’input, come ho verificato qui . È ansible visualizzare l’immagine?

In onchange posso inviare il modulo al server e il server può inviare i dati, ma è davvero necessario? Il client non può visualizzare i dati senza il ping-pong sul server? È un problema di sicurezza?

Puoi usare l’ object web-api FileReader per questo, guarda questo frammento:

l’HTML

  // input you want to read from (src)  // image you want to display it (target) 

il javascript

 function showImage(src,target) { var fr=new FileReader(); // when image is loaded, set the src of the image where you want to display it fr.onload = function(e) { target.src = this.result; }; src.addEventListener("change",function() { // fill fr with image data fr.readAsDataURL(src.files[0]); }); } var src = document.getElementById("src"); var target = document.getElementById("target"); showImage(src,target);