ReadDataURL - Image not loading in firefox using jquery

Question

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>

Show source
| javascript   | jquery   | asp.net   | image   | webforms   2017-01-02 15:01 1 Answers

Answers ( 1 )

  1. 2017-01-02 16:01

    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>
    
◀ Go back