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

#jquery #iframe #model-view-controller #filecontentresult

#jquery #iframe #модель-представление-контроллер #filecontentresult

Вопрос:

У меня есть загрузка файла внутри 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 не сработает. Он запускает функцию, но в закрывающей скобке; Это не удалось.
фоновое изображение el получает это: Background-image: url(undefined);

Ответ №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);
});