第一次无法在更新面板内自动将文件上传到服务器答案

【问题标题】：Uploading a file to server automatically inside an update panel does not work the first time第一次无法在更新面板内自动将文件上传到服务器
【发布时间】：2016-03-17 14:24:43
【问题描述】：

要求

我正在尝试上传文件，只要用户选择它。我必须满足以下要求：

该按钮与应用程序中的其他按钮相似。
文件在用户选择后立即上传。
我需要它在 UpdatePanel 中，因为我必须对页面进行有条件的更新。我可以对文件选择 (a.k.a onchange) 事件进行完整回发。

当前代码

以下是我的视图文件的外观：

<asp:UpdatePanel ID="upData" UpdateMode="Conditional" runat="server">
    <ContentTemplate>

    <div style="width: auto; float: right;">

    <asp:Button ID="btnFileImportSkin" CssClass="ButtonSkin AddButton" Text="Import" Style="position: absolute; z-index: 2;" runat="server" OnClientClick="Javascript:onImport(); return false;" />
    <asp:FileUpload ID="fileImport" Visible="false" Style="position:relative; opacity:0;" runat="server" onchange="Javascript:onFileSelected();"  /> 
           <%-- onchange="Javascript:this.form.submit();" /> --%>
           <%-- <asp:Button ID="btnUpload" runat="server" OnClientClick="Javascript:alert('Uploading...'); __doPostBack('<%= btnUpload.ID %>', ''); return false;" /> --%>
    <asp:Button ID="btnUpload" OnClick="btnUpload_Click" runat="server" />
    </div>

    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload" />
    </Triggers>
</asp:UpdatePanel>

相关的Javascript：

<script type="text/javascript">
    function onImport() {
        var fileImportClientId = '<%= fileImport.ClientID %>';
        document.getElementById(fileImportClientId).click();
    }

    function onFileSelected() {
        alert("File Selected");
        // I have tried calling the function directly and with a timeout
        setTimeout(onUpload, 20);
    }

    function onUpload() {
        var btnUploadClientId = '<%= btnUpload.ClientID %>';
        document.getElementById(btnUploadClientId).click();
    }
</script>

后面的代码：

protected void btnUpload_Click(object sender, EventArgs e)
{
    // PostedFile is null first time code gets here on user selecting a file
    if (fileImport.PostedFile != null)
    {
        if (fileImport.PostedFile.FileName.Length > 0)
        {
            ImportFromFile();
        }
    }
}

解释/流程

用户点击btnFileImportSkin按钮。
函数onImport被调用，它以编程方式点击fileimport按钮。
用户选择一个文件，然后按打开。
onFileSelected 被调用。
onUpload 调用成功。
btnUpload_Click每次都调用成功。

然而问题是

fileImport.PostedFile 在用户第一次选择文件时为空。第二次一切正常，从那时起。

相关

This question 与我的问题密切相关，但 OP 可能需要像 Gmail 中的异步上传解决方案。我已经尝试在此问题的答案中执行以下操作：

__doPostBack() 在btnUpload 的 OnClientClick 事件中
this.form.submit() 我的FileUpload 控件的onchange 事件。
在Page_PreRender中设置FileUpload控件的onchange属性

附加说明

当我没有更新面板时，这件事可以完美运行。我在FileUpload 控件的onchange 事件中直接执行this.form.submit()。
目标框架是 .NET 4.0

注意：在上面的 FileUpload 控件中添加了 Visible="false"。这是问题，但我在提问时忽略了它。

【问题讨论】：

标签： asp.net file-upload webforms updatepanel

【解决方案1】：

此代码适用于我，同时针对 .Net 4.5 和 4.0 框架版本。我将您的代码复制/粘贴到一个新的 Web 窗体应用程序中，并且在这两种情况下 fileImport.PostedFile 都不为空，而是包含我选择的图像的流。

您页面上的任何其他标记是否存在问题？或者你的页面生命周期？您在用户控件或 Web 表单页面上发布的 html / javascript 是什么？

【讨论】：

html 和 javascript 都在用户控件中。
你确定它第一次有效吗？当我第二次点击btnFileImportSkin 时，它也适用于我。
是的，我是，110%。 :) 我只单击一次按钮，代码第一次命中断点，每次。
那么您认为将它放在用户控件中与我的问题有关吗？
是的，我认为您的问题很可能出现在 asp.net 页面生命周期的某个地方。它在用户控件中的事实不一定是问题，只是现在在 Web 表单页面生命周期的野兽中有更多的移动部分。但是，如果不查看母版页、Web 表单和用户控件，这很难诊断。 .aspx 和代码隐藏。我刚刚将您发布的代码从 Web 表单移动到新 Web 表单应用程序中的用户控件，它对我有用，仍然在第一次单击时发布文件。

【解决方案2】：

在BeeTee's answer、另一个SO post 和this thread on another forum 的提示下，我发现FileUpload 控件在预渲染期间必须可见。对于该控件所在的任何父 UpdatePanels 来说，这可能都是正确的。所以，基本上我从下面的控件定义中删除了Visible=false：

<asp:FileUpload ID="fileImport" Visible="false" Style="position:relative; opacity:0;" runat="server" onchange="Javascript:onFileSelected();"  />

在我的情况下，我可以通过将 css opacity 属性设置为 0 来隐藏它。但是，还有其他两种方法：

设置css属性display:none
在预呈现期间将 asp 控件的 Visible 属性临时设置为 true。这在另一个论坛的上面链接的线程中有详细说明。

请注意 Visible 对于此 FileUpload 控件的父级也应为 true，如其他 SO 线程中所述。

【讨论】：