Read image file and convert to base64 format in IE

Question

I am using below jquery which reads the image input from file input and convert into base64 format to display which is working perfectly fine in googlechrome but not in IE. I wanted to acheive the same thing in IE. Please help

function readImage(input) {
if ( input.files && input.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
         $('#img').attr( "src", e.target.result );
         $('#base').text( e.target.result );
    };       
    FR.readAsDataURL( input.files[0] );
  }
 }

$("#asd").change(function(){

   readImage( this );
});

Answer 1

IE only supports FileReader in IE10 and higher.

Can I use - FileReader

Besides that your IE8 will only support 32kb of data for a base64 image source. You will need to find another approach which involves returning the base64 string explicitly from your server if you are required to support IE9 and lower. One client side approach would be to extract base64 data from a canvas...

how-to-upload-an-image-save-it-to-localstorage-and-then-display-it-on-the-next...

Problem with this is IE8 will defeat you again and you will have to go looking for some sort of shim to work around your problem.

Can I use - Canvas
how-can-i-use-the-html5-canvas-element-in-ie

Finally you can try a FileReader polyFill such as

https://github.com/Jahdrien/FileReader