Question

我正在编写一段代码，以加载图像并在<img>标签中显示图像预览，它在chrome和Firefox上完美运行，但在Microsoft Edge上却不行。我进行了非常密集的搜索，但找不到任何相关的解决方案，也许有人遇到了类似的问题，但我没有在网上找到。无论如何，当我执行console.log尝试调试问题时，发现.change（）无法正常工作。（请注意，它会加载一个约20 KB的小jpeg图像，但如果它大于25 KB则将无法正常工作，并且需要尝试至少2次，然后才能加载一幅小图像）。

$(document).ready(function(e) {     
$('.img_upload img').bind("click" , function () {   
     var img=$(this);
     var input=img.next(".send_photo_input");
 input.trigger("click");
 input.change(function(){
         console.log("trigger the input");                   
         var preview= $(".send_photo_img");

       var file=document.querySelector('input[type=file]').files[0];
        var reader=new FileReader();            
       reader.addEventListener("load",function(){
          console.log("this is before preview");

         preview.attr("src",reader.result);

           console.log("after preview");                

       },false);  //end of the listening           
       if(file)
       {
           console.log("inside if");
           reader.readAsDataURL(file);
       }
       else
       {
           console.log("inside else");
       }        
    });

 });

});

上面的文件是ex1.js

   <!DOCTYPE html>
    <html>
    <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="ex.css">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Untitled Document</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="ex1.js"></script>
   </head>
   <body>
        <div class="img_upload">
           <img class="send_photo_img" id="send_photo1_img" src="left.png"/>
           <input id="send_photo1" name="send_photo1" class="send_photo_input" 
    type="file"/>
       </div>
  </body>
  </html>

ex.css与display：none一起隐藏输入元素

它不在Microsoft Edge上。我一直在调试此问题，需要一些帮助来解决它，谢谢。

Answer 1

尝试使用on

input.on('change',function(){
//rest of the code
})

Answer 2

只想指出另一个有趣的行为。在调试期间，我在函数input.change内添加了另一个触发器/单击。第一次单击不起作用，但是再次单击（第二次）时，它将预览并加载第一个选择/加载图像，而不管图像的大小如何。

 input.trigger("click");
 input.change(function(){
 input.trigger("click");  <-----add to debug

 *****
 }

Answer 3

尝试将更改事件置于按钮单击事件之外。代码如下：

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" >
        $(document).ready(function (e) {
            $('.img_upload img').bind("click", function () {
                var img = $(this);
                var input = img.next(".send_photo_input");
                input.trigger("click");
            });
            $(".send_photo_input").change(function () {
                console.log("trigger the input");
                var preview = $(".send_photo_img");

                var file = document.querySelector('input[type=file]').files[0];
                var reader = new FileReader();
                reader.addEventListener("load", function () {
                    console.log("this is before preview");

                    preview.attr("src", reader.result);

                    console.log("after preview");

                }, false);  //end of the listening           
                if (file) {
                    console.log("inside if");
                    reader.readAsDataURL(file);
                }
                else {
                    console.log("inside else");
                }
            });
        });
    </script>
    <style type="text/css">
       #send_photo1{
           display:none;
       }
    </style>
</head>
<body>
    <div class="img_upload">
        <img class="send_photo_img" id="send_photo1_img" src="../Images/Capture.PNG" />
        <input id="send_photo1" name="send_photo1" class="send_photo_input"
               type="file" />
    </div>
</body>

结果如下：

jQuery-选择图片后不触发.change（）

3 个答案: