在开发的时候经常遇到这样的需求，用户在上传图片的时候，想要看到自己上传的图片是否正确，这时候需要把用户上传的图片及时显示出来，然后等他点击上传的时候，程序再执行上传到服务器。
<!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>
原文：http://www.cnblogs.com/li-sir/p/7942044.html