Jak wyświetlić wybrany obraz bez wysyłania danych do serwera?

Question

Próbuję pokazać klientowi obraz który został wybrany:

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

Ale nie mogę odczytać wartość na wejściu, jak już wyrejestrowany here. Czy możliwe jest wyświetlenie obrazu?

W onchange Mogę wysłać formularz do serwera, a serwer może wysłać dane z powrotem, ale czy to naprawdę konieczne? Czy klient nie może wyświetlić danych bez ping-ponga na serwerze? Czy to jest problem bezpieczeństwa?

Answer 1

Można użyć FileReader web-api dla tego przedmiotu, zobacz ten fragment:

HTML

<input id="src" type="file"/> // input you want to read from (src) 
<img id="target"/> // image you want to display it (target) 

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);