Knowledge Walls
John Peter
Pune, Maharashtra, India
How to load image from client machine to browser using Javascript with Example
1930 Views
FileReader 
FileReader class in Javascript is used to read the file in client browser. It is working in Chrome, Opera and Firefox. FileReader returns base64 encoded text as output by e.target.result.
Example
<html>
    <head>
        <script type="text/javascript">
            document.getElementById("my_file_reader").onchange = function(){
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById("image_div").src = e.target.result;
                };
                reader.readAsDataURL(this.files[0]);
            };
        </script>
    </head>
    <body>
         <div style="padding-bottom: 2px;"><input type="file" id="my_file_reader" /></div>
         <img id="image_div" width="300" height="200" />
    </body>
</html>
Demo & Output 
Best Lessons of "Good Javascript Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details