第一次無法在更新面板內自動將文件上傳到伺服器

要求

我正在嘗試上傳文件，只要使用者選擇它。我必須滿足以下要求：

1. 該按鈕看起來像應用程序中的其他按鈕。
2. 使用者選擇文件後，文件就會立即上傳。
3. 我需要它在 UpdatePanel 中，因為我必須對頁面進行有條件的更新。我可以對文件選擇（又名）事件進行完整回發。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();
       }
   }
}

說明/流程

1. 使用者點擊btnFileImportSkin按鈕。
2. 該函式onImport被呼叫，它以程式方式點擊fileimport按鈕。
3. 使用者選擇一個文件，然後按打開。
4. onFileSelected叫做。
5. onUpload被成功呼叫。
6. btnUpload_Click每次都呼叫成功。

然而問題是_

使用者第一次選擇文件時，fileImport.PostedFile 為 null。第二次一切正常，從那時起。

有關的

這個問題與我的問題密切相關，但 OP 可能想要像 Gmail 中的非同步上傳解決方案。我已經嘗試在這個問題的答案中執行以下操作：

1. __doPostBack() 在 OnClientClick 事件中btnUpload
2. this.form.submit() 我的FileUpload控制項的 onchange 事件。
3. FileUpload在Page_PreRender中設置控制項的onchange屬性

附加條款

1. 當我沒有更新面板時，這件事工作得很好。我在控制的 onchange 事件中直接執行 this.form.submit() FileUpload。
2. 目標框架是 .NET 4.0

FileUpload注意：在上面的控制項中添加了 Visible=“false” 。這是問題所在，但我在提問時忽略了它。

借助BeeTee 的回答、另一個SO 文章和另一個論壇上的這個執行緒的提示，我發現FileUpload控制項必須在預渲染期間可見。對於此控制項所在的任何父UpdatePanelVisible=false ，這可能都是正確的。因此，基本上我從下面的控制項定義中刪除了：

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

在我的情況下，我可以通過將css opacity屬性設置為 0 來隱藏它。但是，還有其他兩種方法可以解決它：

1. 設置css屬性display:none
2. 在預呈現期間將 asp 控制項的 Visible 屬性臨時設置為 true。這在另一個論壇的上面連結的執行緒中有詳細說明。

請注意，對於此 FileUpload 控制項的父級，Visible 也應為 true，如其他 SO 執行緒中所述。

當針對 .Net 4.5 和 4.0 框架版本時，此程式碼適用於我。我將您的程式碼複製/粘貼到一個新的 Web 窗體應用程序中，並且在這兩種情況下 fileImport.PostedFile 都不為空，而是包含我選擇的圖像的流。

您頁面上的任何其他標記是否存在問題？或者你的頁面生命週期？您在使用者控制項或 Web 表單頁面上發布的 html / javascript 是什麼？

引用自：https://stackoverflow.com/questions/34227505