1

I try to encode my image to base64 data string, but I have problem with output result. My base64 string is very short to has a valid data. If I print it in test div, I have normal and long string. Where the problem I don't know. I want to use my code for previewing logo.

function readURL(input, object) {
if (input.files && input.files[0])
{
  var reader = new FileReader();

  reader.onload = function (e)
    {
      $(object).attr('style', 'background-image :url("' + e.target.result + '")');
        console.log(e.target.result);
  }
  reader.readAsDataURL(input.files[0]);
}};

This is my function...

$("#company_avatar").change(function(){
readURL(this, '#company_avatar_preview');});

And this function in use.

T.Abdullaev
  • 89
  • 1
  • 10

1 Answers1

0

You are getting base64 string back, its better to add that to img src. You cant give background base64 code. 

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(input.files[0]);
            reader.onload = function(e) {
                $('#' + '<%=ImageDisplay.ClientID%>').attr('src', e.target.result).width(256).height(96);

                $('#status').html("Done loading. processed 1 files.");

            };
        }
    }

ImageDisplay

<input id="fileBox" name="fileBox" type="file" onchange="readURL(this);" accept="image/png, image/jpeg, image/gif" runat="server"/>
    <img id="ImageDisplay" src="#" alt="#Default" runat="server"/>
    <div id="status"></div>
nikunjM
  • 560
  • 1
  • 7
  • 21