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

I have a file upload inside an Iframe. when a user upload an image this file upload send the image to the server and server pass the file name to the file upload. Now I use this name and send it to an action that gives me image file as FileContentResult. See below:

.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);
});

Every things work fine until image.onload fired. It runs the function but at the close bracket; It was failed. background-image of el get this: Background-image: url(undefined);

It seems your problem reason is asynchronicity, so try this code:

.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);
});