Seçilen görüntü sunucuya veri gönderilmeden nasıl görüntülenir?

Question

Ben müşteriye o seçilmiş olan bir resim göstermek çalışıyorum:

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

Ama here teslim olarak ben, girişin değerini okuyamaz. Resmi görüntülemek mümkün mü?

onchange'da formu sunucuya gönderebilir ve sunucu verileri geri gönderebilir, ancak gerçekten gerekli mi? İstemci ping-pong olmadan verileri sunucuya gösteremez mi? Bu bir güvenlik sorunu mu?

Bunun için FileReader web API nesnesini kullanabilirsiniz

Answer 1

, bu pasajı bkz:

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