Question

我遇到了一个奇怪的情况，只有一个按钮和IE中的fileupload控件。我确实找到了解决这个问题的临时方法，但我想找出问题的真正原因，如果有更好的解决方法，那么我已经做了。

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

请注意，这与fileupload无法使用updatepanels无关，我已经添加了用于将文件作为触发器上传到updatepanel的按钮。

代码的工作原理： 用户单击图像，导致隐藏的文件上载触发并打开浏览文件对话框。用户选择文件后，会出现一个带有文本框和两个按钮（浏览和上传）的modalpopup。文本框具有文件名，浏览按钮用于再次打开浏览文件对话框，上传按钮用于上传文件。

这一切都适用于IE以外的所有浏览器。在IE中，会发生以下情况：当用户单击上传按钮时，它显示为没有发生任何事情，如果他们再次单击该按钮，则会触发按钮事件，但随后文件上载控件指出没有文件。

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

为了解决这个问题，我做了以下事情。在按钮的第一次单击我触发客户端事件并使用jquery如果浏览器是IE，请执行以下操作：从fileupload控件获取文件的完整文件名和路径，并将其设置为隐藏字段的值（可能由于IE不像其他浏览器那样隐藏文件路径）。然后强制它触发另一个按钮的click事件，然后转到另一个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();
        }
    }

Postbehind

添加按钮以触发

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

uploadfile点击事件

 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帖子

它可能对你有帮助

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

1 个答案: