jquery - 为什么从父级 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被解雇。它运行该函数，但在右括号中；它失败了。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);
});