Articles → JavaScript → Reading Image File Javascript Using Filereader

Reading Image File Javascript Using Filereader






Example




  1. A file upload control
  2. An image control



Readasdataurl Method





Code


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title></title>
      <script src="jquery-3.1.1.js"></script>
      <script>
         $(document).ready(function () {
             $("#upload").change(function (evt) {
                 for (var i = 0, f; f = evt.target.files[i]; i++) {
                     var reader = new FileReader();
                     reader.onload = function (evt) {                        
                          document.getElementById("imgTest").src = evt.target.result;
                     };
                     reader.readAsDataURL(f);
                 }
             });
         });
      </script>
   </head>
   <body>
      <form>
         <img id="imgTest" src="#" />
         <input type="file" id="upload" />
      </form>
   </body>
</html>



Output


Picture showing the output of reading image file JavaScript using FileReader

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, June 20, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250