为什么在 FileContentResult 中从父级加载 Iframe 中的图像失败？

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 被解雇。它运行函数，但在右括号处；它失败了。 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);
});

为什么在 FileContentResult 中从父级加载 Iframe 中的图像失败？

Why loading image inside an Iframe from parent as FileContentResult failed?

jquery

iframe

model-view-controller

filecontentresult