jQuery - .change () не запускается после выбора изображения - PullRequest
Новая
       2

jQuery - .change () не запускается после выбора изображения

0 голосов
/ 28 октября 2018

Я пишу фрагмент кода, который загружает изображение и показывает предварительный просмотр изображения в теге <img>, он отлично работает на Chrome и Firefox, но не на Microsoft Edge. Я провел очень интенсивный поиск, но не смог найти подходящего решения, возможно, у кого-то была похожая проблема, которую я не нашел в Интернете. Во всяком случае, когда я делаю console.log, пытаясь отладить проблему, обнаружил, что .change () не работает. (Обратите внимание, что он загружает небольшое изображение JPEG размером около 20 КБ, но он не будет работать, если он больше 25 КБ, и нужно попробовать хотя бы 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 просто с отображением: нет, чтобы скрыть элемент ввода

Не работает в Microsoft Edge. Я устранял эту проблему, мне нужна помощь, чтобы разобраться, заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 28 октября 2018

Просто хочу указать на еще одно интересное поведение.Во время отладки я добавил еще один триггер / щелчок внутри функции input.change.1-й щелчок не работает, но при повторном нажатии (2-й раз) будет выполнен предварительный просмотр и загрузка 1-го изображения выбора / загрузки независимо от размера изображения. 

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

 *****
 }
0 голосов
/ 29 октября 2018

Попробуйте поместить событие изменения вне события нажатия кнопки.Код как показано ниже: 

<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>

Результат, как показано ниже: enter image description here

0 голосов
/ 28 октября 2018

Попробуйте использовать on

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