В методе
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);
Код не проверял, запускал только в голове ;)
