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

看来你的问题原因是 asynchronicity ，所以试试这段代码：

.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中加载图像？

1 个答案: