为什么在 FileContentResult 中从父级加载 Iframe 中的图像失败?
Why loading image inside an Iframe from parent as FileContentResult failed?
我在 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);
看来你的问题原因是异步性,所以试试这个代码:
.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);
});
我在 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);
看来你的问题原因是异步性,所以试试这个代码:
.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);
});