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

Question

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

<input type="file" onchange="showImage(this)"/> 

ma non riesco a leggere il valore dell'ingresso, come ho verificato here. È possibile visualizzare l'immagine?

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

Answer 1

È possibile utilizzare FileReader oggetto Web-API per questo, vedono questo frammento:

il codice HTML

<input id="src" type="file"/> // input you want to read from (src) 
<img id="target"/> // 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);