按钮未触发第一次单击的事件，导致 IE（ASP.NET）中的 FileUpload 控件出现奇怪的结果

Question

我遇到了一个奇怪的情况，只有一个按钮和 IE 中的文件上传控件。我确实找到了解决此问题的临时方法，但是我想找出所谓的问题的实际原因以及是否有更好的解决方法然后我做了什么。

关于应用程序有几点需要注意。 1. 我正在使用母版页 2. 我的主页上有一个更新面板 3.有问题的控件在clientPage上 4. 我隐藏了fileupload 控件，而是在modalpopup 中向用户显示“自定义”文件上传框。 Fileupload控件不在modalpopup上 5.以下适用于除IE以外的所有浏览器

请注意，这与文件上传不能与更新面板一起使用无关，我已经将用于上传文件的按钮作为触发器添加到更新面板。

代码的工作原理： 用户单击图像会触发隐藏文件上传并打开浏览文件对话框。一旦用户选择了文件，就会出现一个带有文本框和两个按钮（浏览和上传）的模式弹出窗口。文本框有文件名，浏览按钮用于再次打开浏览文件对话框，上传按钮用于上传文件。

这一切都可以在除 IE 之外的所有浏览器中完美运行。在 IE 中会发生以下情况： 当用户单击上传按钮时，它似乎没有发生任何事情，如果他们再次单击该按钮，则会触发按钮事件，但随后 fileupload 控件表明没有文件。

取消隐藏文件上传控件后，我发现发生了以下情况： 在第一个按钮单击文件上传被清除，而不是做回发。 第二个按钮单击回发，但文件上传现在为空，导致我的控件没有任何文件。

为了解决这个问题，我做了以下事情。在按钮的第一次单击上，我触发了一个客户端事件，如果浏览器是 IE，则使用 jquery 执行以下操作： 从 fileupload 控件中获取文件的完整文件名和路径，并将其设置为隐藏字段的值（可能是由于 IE 不像其他浏览器那样隐藏文件路径）。然后强制它触发另一个按钮的点击事件，该事件会转到不同的 onclick 方法来上传文件。

代码：

图片

<a onclick="uploadKycSubType('Identity','','0')">
<img src="../images/upload.png">
</a>

模态弹出和文件上传控件：

<cc1:ModalPopupExtender ID="ModalPopupExtender4" runat="server" TargetControlID="hdnTarget4" PopupControlID="pnlUpload" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>

<cc1:AnimationExtender ID="AnimationExtender4" runat="server" TargetControlID="btnUploadClose">
    <Animations>
            <OnClick>
                <Sequence AnimationTarget="pnlUpload">
                    <Parallel AnimationTarget="pnlUpload" Duration=".7" Fps="20">
                        <Move Horizontal="200" Vertical="200"></Move>
                        <Scale ScaleFactor="0.05" FontUnit="px" />
                        <FadeOut />
                    </Parallel>
                    <StyleAction Attribute="display" Value="none"/>
                    <StyleAction Attribute="height" Value=""/>
                    <StyleAction Attribute="width" Value=""/>
                    <StyleAction Attribute="fontSize" Value="14px"/>
                    <EnableAction AnimationTarget="btnUploadClose" Enabled="true" />
                </Sequence>
            </OnClick>
    </Animations>
</cc1:AnimationExtender>

<asp:FileUpload ID="imageUpload" CssClass="fileInput" runat="server" onchange="$('#hiddenText').val($(this).val().split('\\').pop());uploadChange();" />

<asp:Panel ID="pnlUpload" runat="server" CssClass="Modal_Upload" >
    <table width="100%" style="border-collapse:collapse">           
        <tr>
            <td colspan="2">
                <h2><%#bindValue("UploadDocument")%></h2>
            </td>
        </tr>
        <tr >
            <td colspan="2">
               <p><%#bindValue("UploadDocumentInfo")%>.</p> 
            </td>
        </tr>
        <tr>
            <td>
                <div class="hide">
                   <input type="text" class="textbox" id="hiddenText"/>
                </div>
                <input type="text" class="textbox" id="imageText"  style="width:350px"/>    
            </td>
            <td>
                <input type="button" value="<%#bindValue("Browse")%>" onclick="browse()" class="buttonClose" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="AddSpace">
                </div>
                <asp:Button runat="server" ID="btnUploadClose" CssClass="buttonClose" OnClick="btnClose_Click"/>
            </td>
            <td>
                <div class="AddSpace">
                </div>
                <asp:Button runat="server" ID="btnUpload" CssClass="buttonShort" OnClick="btnKycUpload_Click" OnClientClick="uploadIEKyc();"/>
            </td>
            <asp:Button runat="server" ID="Button1" CssClass="fileInput" OnClick="btnKycUploadIE_Click"/>
        </tr>
    </table>
</asp:Panel>

jQuery 函数

function uploadKycSubType(link,bankAccount,bankNumber) {

        $("#<%= hdnEdit.ClientID %>").val(link);
        $("#<%= hdnBank.ClientID %>").val(bankAccount);
        $("#<%= hdnBankNumber.ClientID %>").val(bankNumber);

        browse();
    }

    function browse(){
        $('#<%= imageUpload.ClientID %>').click();
    }

    function uploadChange() {
        $('#imageText').val($('#hiddenText').val());

        if($("#<%=pnlUpload.ClientID %>").css("display") == "none") 
            $find("MainContent_ModalPopupExtender4").show();
    }

    function uploadIEKyc() {
        var ua = $.browser;

        if (ua.msie) {
            $('#<%= hdnFile.ClientID %>').val($('#<%= imageUpload.ClientID %>').val());
            $('#<%=Button1.ClientID %>').click();
        }
    }

后期

添加按钮触发

protected void Page_Init(object sender, EventArgs e)
    {
        PostBackTrigger trigger = new PostBackTrigger();
        trigger.ControlID = btnUpload.UniqueID;
        UpdatePanel up = (UpdatePanel)Page.Master.FindControl("Updatepanel1");
        up.Triggers.Add(trigger);
    }

上传文件点击事件

 protected void btnKycUpload_Click(object sender, EventArgs e)
    {

        if (imageUpload.HasFile)
        {
            //do file upload
        }
        else
        {
            this.ShowInstruction(ErrorName.DocumentNotSaved, Session["username"] == null ? string.Empty : Session["username"].ToString());
            ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScrollTo", "topScreen();", true);
        }

    }

      protected void btnKycUploadIE_Click(object sender, EventArgs e)
    {
        string files = hdnFile.Value;

        if (!string.IsNullOrEmpty(files))
        {
            FileInfo fi = new FileInfo(files);

            string fileName = fi.Name;
            string fileExtension = fi.Extension;
            fileExtension = fileExtension.Substring(fileExtension.IndexOf(".") + 1);

            //do file upload

        }
        else
        {
            this.ShowInstruction(ErrorName.DocumentNotSaved, Session["username"] == null ? string.Empty : Session["username"].ToString());
            ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ScrollTo", "topScreen();", true);
        }
    }

如果您对此有任何其他要求，请告诉我，否则感谢您的时间和帮助。

Answer 1

将您的模态弹出窗口放入表单中并尝试一下。

查看this 发帖

也许对你有帮助