在开发的时候经常遇到这样的需求，用户在上传图片的时候，想要看到自己上传的图片是否正确，这时候需要把用户上传的图片及时显示出来，然后等他点击上传的时候，程序再执行上传到服务器。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><body> ???<input type="file" name="file" onchange="showPreview(this)" /> ???<img id="portrait" src="" style="display:none;" /></body></html><script type="text/javascript"> ???function showPreview(source) { ?????var file = source.files[0]; ?????if(window.FileReader) { ?????????var fr = new FileReader(); ?????????console.log(fr); ?????????var portrait = document.getElementById(‘portrait‘); ?????????fr.onloadend = function(e) { ???????????portrait.src = e.target.result; ?????????}; ?????????fr.readAsDataURL(file); ?????????portrait.style.display = ‘block‘; ?????} ???}</script> ???js实现图片上传实时显示
原文地址：http://www.cnblogs.com/li-sir/p/7942044.html