Почему загрузка изображения внутри Iframe из родительского объекта как FileContentResult не удалась?

Question

У меня есть файл загрузки внутри Iframe. когда пользователь загружает изображение, эта загрузка файла отправляет изображение на сервер, и сервер передает имя файла для загрузки файла. Теперь я использую это имя и отправляю его в действие, которое дает мне файл изображения как FileContentResult, Увидеть ниже:

.on('fileuploaddone', 
     function (e, data) {
     name = data.result.files[0].name;
     if (name) {
         var el = $('<div class="imageLayer" onClick="ShowTopTools(this)">'+
                 '<div class="resizePan"></div>'+
                 '</div>');
         var image = new Image();
         image.src = '/Advertisement/Image/'+name;
         image.onload = function () {
                  el.css('background-image', 'url(' + e.target.result + ')')
                    .css('width', this.width)
                    .css('height', this.height);
         }          
         $("#box").append(el);
});

Все работает нормально, пока image.onload уволена. Он запускает функцию, но в закрытой скобке; Это не удалось. background-image из el получить это: Background-image: url(undefined);

Answer 1

Кажется, причина вашей проблемы - асинхронность, поэтому попробуйте этот код:

.on('fileuploaddone', 
     function (e, data) {
     name = data.result.files[0].name;
     if (name) {
         var el = $('<div class="imageLayer" onClick="ShowTopTools(this)">'+
                 '<div class="resizePan"></div>'+
                 '</div>');
         var image = new Image();
         image.src = '/Advertisement/Image/'+name;
         $(image).data('target',e.target.result);
         image.onload = function () {
                  el.css('background-image', 'url(' + $(this).data('target') + ')')
                    .css('width', this.width)
                    .css('height', this.height);
         }          
         $("#box").append(el);
});