asyncfileupload in jquery modal popup

问题

I have placed an AsyncFileUpload control on a jquery modal popup and I can't the "AsyncFileUpload1_UploadedComplete" to fire when ok to upload.

It does work when placed directly on the page. (This is all on a masterpage by the way)

Relevent code is

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %>

    <script type="text/javascript" language="javascript">

    function uploadError(sender, args) {
        alert(args.get_errorMessage());
        document.getElementById('<%=lblStatus.clientid %>').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
    }

    function StartUpload(sender, args) {
        document.getElementById('<%=lblStatus.clientid %>').innerText = 'Uploading Started.';
    }

    function UploadComplete(sender, args) {
        var filename = args.get_fileName();
        var contentType = args.get_contentType();
        var text = filename + " has been uploaded successfully. Size: " + args.get_length() + " bytes";
        document.getElementById('<%=lblStatus.clientid %>').innerText = text;
    }

</script>

       <cc2:AsyncFileUpload ClientIDMode="AutoID" ID="AsyncFileUpload1" runat="server" OnClientUploadError="uploadError"
                    OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"
                    UploaderStyle="traditional" ErrorBackColor="Red" ThrobberID="Throbber" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
                    UploadingBackColor="#66CCFF" />
                <asp:Label ID="Throbber" runat="server" Style="display: none">
                            <img src="images/icons/ajax-loader.gif" style="vertical-align:middle"  alt="loading" />
                </asp:Label>&nbsp;
                <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>

Like I say does work when placed on masterpage directly , but doesn't work when placed with a div which is to be a modal popup. I have btw set

<form id="Form1" runat="server" enctype="multipart/form-data" method="post">

The code behind:

Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs)
    If AsyncFileUpload1.HasFile Then
        txtRef.Text = "1234"
        If IO.Directory.Exists(Server.MapPath("~\uploads\" & txtRef.Text)) = False Then
            IO.Directory.CreateDirectory(Server.MapPath("~\uploads\" & txtRef.Text))
        End If
        Dim strPath As String = MapPath("~/Uploads/" & txtRef.Text & "/") & IO.Path.GetFileName(e.FileName)
        AsyncFileUpload1.SaveAs(strPath)
        Dim attach As New attachment
        attach.CallID = txtRef.Text
        attach.Filename = IO.Path.GetFileName(e.filename)
        attach.Ext = System.IO.Path.GetExtension(e.filename)
        attach.UserID = Session("user_id")
        attach.Create()
    End If
End Sub

in the form tags but still no luck and I have upgraded ajaxtoolkit to the latest.

Any ideas?

Thanks,

回答1:

This happens because jQuery removes the control from the form and puts it at the end of the body when it creates the dialog. When it submits the form, the AsyncFileUpload control is no longer in the form, so there is nothing to postback to the server for this control and that's why it is not posting the file back. What you need to do is put the dialog div back into the form after jQuery creates it.

        $('#yourDialogID').parent().appendTo('form');

来源：https://stackoverflow.com/questions/8375298/asyncfileupload-in-jquery-modal-popup

标签

ASP.NET

jquery-ui

ajaxcontroltoolkit

asyncfileupload