How to read the contents of an Image file in Web app

How to read the contents of an Image file in Web app

BY 07 Apr 2014 Web Application Development

Hi All,

 I am trying to read the contents of a “.png” file using the following code snippet in index.html :

 

 <script>

function readImageFile() {
 var files = “./css/launcher.png”;
  var reader = new FileReader();
  console.log(“readImageFile” + files );
  
   reader.onload =  function(e) 
                    { 
                        var img = document.createElement(“img”);
                        img.width=200;
                        img.src = e.target.result; 
                         console.log(“e.target.result” + e.target.result );

                        /* Set the selected image’s dataURL */     
                        img.title = escape(files.name);
                        img.className = “img”;
                        
                          console.log(“img.title” + e.target.result );

                        document.getElementById(“dispImag”).appendChild(img);
                    };
         
                    reader.readAsDataURL(files);
                     console.log(“after readAsDataURL”   );
}

</script>

<body>

        <div class=”ui-content content-padding” id = “dispImag”>

<button id = “butReadFile” onclick=readImageFile() > </button>

</div>

</body>

    But, the event listener  “reader.onload =  function(e)” never gets called. I am not sure if I am missing anything here. Appreciate if any one can help me to fix this issue.

Thanks & Regards

        Vikram

 

Written by