ReadDataURL - 图像未使用 jquery 在 Firefox 中加载

Question

我正在使用这段代码将图像从我的文件系统加载到用户，然后他将其上传到服务器，如下所示（启用图像的裁剪功能）：

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

函数的定义如下：

  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]);
      }
  }

使用 chrome 浏览器可以正常工作。当我在Firefox中使用它时，根本没有加载图像......

我怎样才能让它在所有浏览器上都能正常工作？

编辑：这是问题的关键：

https://jsfiddle.net/novhd8k3/

由于某种原因，它在这里可以工作，但在那里却不行...我现在很困惑..

@Vish 这是来自控制台的错误：

这里是文件上传控件+图片标签的HTML：

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

Answer 1

问题是你的css。 image 的文件预览工作正常。

试试这个：

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]);
  }
}

另一种方法是直接设置css：

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