Question

我创建了一个iframe来上传并将图像显示到服务器而不刷新页面。请帮我解决一下将保存的图像从iframe拖放到div中的方法。

在iframe（iframeImage.aspx）中使用以下代码显示来自服务器的图像：

<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>    
<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
</div>
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>

从后面的代码，我将图像绑定到datalist。

目前，我需要将图像拖放到主div（CustomDesign.aspx的reportHeader）中。以下代码用于将文本绑定到主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();
            $("#reportHeader").droppable({
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function(event, ui) {
                    $(this)
                    .addClass("ui-state-highlight")
                    .find("p")
                        .html("Dropped!");
                }
            });

            $(textAreaElt).remove();
        }

Answer 1

我很确定你实际上根本无法做到这一点，iframe中的图片在不同的文档中，因此没有拖放框架（我听说过）将跨越2个文档。

听起来我觉得你最好实现一个ajax上传控件，而不是让你的上传代码在iframe中。这仍然可以避免回发，但也可以绕过脏回发等。如果您有google for ajax上传，您将看到许多不同的示例，您可以使用这些示例，具体取决于您使用的结果类型和实际代码库。如果你不使用MVC，那么常见的就是Ajax Control Toolkit

Answer 2

Following Example将帮助您使用Javascript完成此操作。检查出来，我之前使用过，它完美无缺。

祝你好运！

如何将图像从iframe拖放到div中

2 个答案: