CODEWITHSUNDEEP
javascriptjqueryasp.netimagewebforms
Jadin Stojadin
Jadin Stojadin

Reputation: 225

ReadDataURL - Image not loading in firefox using jquery

I'm using this piece of code to load an image from my file system to user before he uploads it to server like following (enabling cropping feature to the image): 

  readURLFirstImage(document.getElementById("<%=FileUpload1.ClientID%>"));

Where the definition for the function is like following:

  function readURLFirstImage(input) {
      if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#<%=before.ClientID%>').attr('src', e.target.result);
          }
          reader.readAsDataURL(input.files[0]);
      }
  }

This works just fine using chrome browser. When I use it in firefox, the image isn't loaded at all...

How can I make this to work on all browsers?

Edit: This is the fiddle for the issue:

https://jsfiddle.net/novhd8k3/

For some reason it works here, yet there it doesnt... I'm confused right now..

@Vish here are the errors from console:

enter image description here

And here is the HTML of the fileupload control + image tag:

 <img style="width:100%;" id="before" src="" runat="server"/>
   <asp:FileUpload ID="FileUpload1" runat="server"  /></div>

Upvotes: 1

Views: 110

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

The problem is your css. File preview for image it is working properly.

Try this:

function readURLFirstImage(input) {
  if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
          $('#<%=before.ClientID%>').attr('src', e.target.result);
          $('#<%=before.ClientID%>').css('width','100px')
                                    .css('height','100px')
                                    .show()
                                    .css('visibility','visible');
      }
      reader.readAsDataURL(input.files[0]);
  }
}

Another way is to set css directly:

<style>
      #before{
          display:block;
          visibility:visible;
          height:100px;
          width:100px;
      }
</style>

Upvotes: 1

Related Questions