Не видит обьект Jquery?

Question

[Сергей Грибок]

Здравствуйте.
Уже второй день ковыряюсь пытаясь подключить плагин для аннотации рисунков. Для этого считываю с помощью input[type="file"] картинку. Дальше с помощью метода readUrl() беру картинку в base64 и записываю её в атрибут. Далее по onChange инпута пытаюсь считать этот атрибут, но что то идет не так и возвращает пустую строку.
Буду благодарен помощи.

(function ($, undefined) {
    $(document).ready(function () {

        var ControlParent = $('.SFC.ImageAnnotation-ImageAnnotation').parent();

        function readURL(input) {
            var Img = "";
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('.DataImg').attr('data-img', e.target.result)
                };
                reader.readAsDataURL(input.files[0]);
               
            }
            console.log("In ReadUrl");

        }

        console.log('ImageAnnotation');
        $('.SFC.ImageAnnotation-ImageAnnotation').hide();         
        ControlParent.append('<div class="SomeClass">'+
            '<button class="Btn">Add Image</button> '+
            '<input type = "file" accept="image/*" class = "AddImageButton" style="display:none">' +
            
            '<div style="margin-top:50px">'+
            '<div id="CustomCanvas" data-img="" style="position:relative">'+
            '</div>'+
                '</div>' +
                '<div class="DataImg" data-img="">text</div>'+
                     '</div>');
  
        $(".Btn").on('click', function () {
            $('.AddImageButton').trigger('click');
        });
       
        console.log($('.DataImg'));
        $('.AddImageButton').on('change',function () {            
            readURL(this);
            ImageUrl = $('.DataImg').attr('data-img');

            console.log(ImageUrl);
           //  console.log($(this).parent().find('#CustomCanvas').attr('data-img'));
          /*  $('#CustomCanvas').annotate({
                color: 'red',
                images: [],
                bootstrap: false
            });*/
            console.log('AfterAnnotate');
            
        });
       
    });
})(jQuery);

Answer 1

[Евгений Калибров]

В методе readURL у вас событие reader.onload вызывается асинхронно, т.е. скорее всего этот код срабатывает уже после того как выполняется строка: ImageUrl = $('.DataImg').attr('data-img');
Что бы это проверить попробуйте добавить console.log() в 2 места:

reader.onload = function (e) {
                    console.log('zzz'); 
                    $('.DataImg').attr('data-img', e.target.result)
                };

и сюда:

readURL(this);
console.log('qqq');

И скорее всего в консоле браузера вы увидите сначала qqq, а потом уже zzz.
Если это так, то можете изменить код так, что бы всё что идёт после вызова readURL, вынести в отдельную функцию и вызывать внутри обработчика события reader.onload:

(function ($, undefined) {
    $(document).ready(function () {

        var ControlParent = $('.SFC.ImageAnnotation-ImageAnnotation').parent();

        function readURL(input) {
            var Img = "";
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('.DataImg').attr('data-img', e.target.result);
                    afterLoad();
                };
                reader.readAsDataURL(input.files[0]);
               
            }
            console.log("In ReadUrl");

        }
        
        function afterLoad() {
            ImageUrl = $('.DataImg').attr('data-img');
            console.log(ImageUrl);
            console.log('AfterAnnotate');
        }

        console.log('ImageAnnotation');
        $('.SFC.ImageAnnotation-ImageAnnotation').hide();         
        ControlParent.append('<div class="SomeClass">'+
            '<button class="Btn">Add Image</button> '+
            '<input type = "file" accept="image/*" class = "AddImageButton" style="display:none">' +
            
            '<div style="margin-top:50px">'+
            '<div id="CustomCanvas" data-img="" style="position:relative">'+
            '</div>'+
                '</div>' +
                '<div class="DataImg" data-img="">text</div>'+
                     '</div>');
  
        $(".Btn").on('click', function () {
            $('.AddImageButton').trigger('click');
        });
       
        console.log($('.DataImg'));
        $('.AddImageButton').on('change',function () {            
            readURL(this);            
        });  
       
    });
})(jQuery);

Код не проверял, запускал только в голове ;)

Comments

[Сергей Грибок]

Спасибо вам человек!:)