Take the 2-minute tour ×

I have created a iframe to upload and display the images into the server without refreshing the page.Kindly help me with a solution to drag and drop the saved image from a iframe into a div.

The following code is used in the iframe(iframeImage.aspx) to display the images from the server:

<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
<br />
VerticalAlign="Bottom" />

From code behind, I am binding the images into the datalist.

Currently, I need to drag and drop the image into a main div(reportHeader of CustomDesign.aspx).The below code is used to bind texts into the main div:

function CreateTextLineLabel(textAreaElt) {
            var id = "Text1" + count.num++;
            $('#reportHeader').append('<div id="' + id + '" class="draggable" ondblclick="showPopup(this)"><span>' + $(textAreaElt).val() + '</span></div>&nbsp;&nbsp;');
            $("#" + id).draggable({ revert: "invalid" });
            $("#" + id).resizable();
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function(event, ui) {

share|improve this question
Needs more info. Are all pages running on the same domain? –  Pekka 웃 Dec 26 '11 at 9:58
Refer to stackoverflow.com/questions/1382553/… –  Alec Smart Dec 26 '11 at 10:03
add comment

2 Answers

up vote 1 down vote accepted

Im pretty sure you cant actually do this at all, images in your iframe are in a different document so no drag and drop framework (that I've ever heard of) will work spanning 2 documents.

It sounds to me like you are better off to implement an ajax upload control instead of having your upload code in an iframe. This will still avoid having a postback but also gets around dirty postbacks ect. If you have a google for ajax upload you will see plenty of different examples you can use depending on the kind of result and actual codebase you are using. If you arent using MVC a common one is in the Ajax Control Toolkit

share|improve this answer
I did try using Ajax control but since i'm new to ajax couldn't come up with a proper solution.My problem is that i need to upload the image into the server without refreshing the entire page and similarly display the saved images. Using ajax control I was unable to get the image url to save into the server. Please guide me through an appropriate path cause I completely confused. –  psobhan Dec 26 '11 at 10:15
Take a look at this article, mikeborozdin.com/post/… it shows how to use Ajax Control Toolkit async upload and then display the uploaded image in the page –  Luke McGregor Dec 26 '11 at 10:33
add comment

The Following Example will help you to accomplish this with Javascript. Check it out, I have used it before and it works perfectly.

Goodl luck!

share|improve this answer
add comment

Your Answer


