Przesyłanie pliku na serwer automatycznie wewnątrz panelu aktualizacji nie działa po raz pierwszy

Question

Wymagania

Próbuję przesłać plik, tak szybko, jak użytkownik wybierze ją. Muszę spełnić następujące wymagania:

1. Przycisk wygląda jak inne przyciski w aplikacji.
2. Plik zostanie przesłany, gdy tylko użytkownik go wybierze.
3. Potrzebuję go w UpdatePanel, ponieważ muszę wprowadzić warunkowe aktualizacje strony. I CAN zrobić pełny odświeżenie na wybranym pliku (a.k.a onchange) wydarzenie.

Aktualny kod

obserwuję to, jak wygląda mój plik widok:

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

Stosowna 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> 

Kod za:

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

Wyjaśnienie/Przepływ

1. Użytkownik klika btnFileImportSkin przycisku.
2. Wywoływana jest funkcja onImport, która programowo klika przycisk fileimport.
3. Użytkownik wybiera plik i naciska Otwórz.
4. onFileSelected jest wywołana.
5. onUpload nazywa się pomyślnie.
6. btnUpload_Click nazywa się pomyślnie za każdym razem.

JednakProblem że

fileImport.PostedFile jest null pierwszy użytkownik czas wybiera plik. Wszystko działa dobrze po raz drugi i od tego momentu.

pokrewne

This question jest ściśle związane z moim problemem, ale PO prawdopodobnie chciał rozwiązanie wysyłania Async jak w Gmailu. Próbowałem już w następujący sposób, jak w odpowiedzi na to pytanie:

1. __doPostBack() w OnClientClick przypadku btnUpload
2. this.form.submit() onChange przypadku mojego FileUpload kontrolą.
3. Ustawianie onchange atrybutu FileUpload kontroli w Page_PreRender

uwagi dodatkowe

1. To coś działało idealnie, kiedy nie mają panele aktualizacji. Robiłem this.form.submit() bezpośrednio w zdarzeniu onchange o wartości FileUpload.
2. ramy docelowa jest .NET 4,0

UWAGA: Dodano Visible = "false" w FileUpload kontroli powyżej. To był problem, ale zignorowałem go, zadając pytanie.

Answer 1

z nutą z BeeTee's answer kolejna SO post i this thread on another forum, to okazało się, że FileUpload sterowania musi być widoczne podczas wstępnego renderowania. Prawdopodobnie jest to prawdziwe dla każdego rodzica UpdatePanels leży ten kontrolne Tak, w zasadzie usunąłem Visible=false z mojego definicji kontroli poniżej.

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

W moim przypadku mogę go ukryć poprzez ustawienie cssopacity właściwość 0. istnieją jednak dwa inne sposoby wokół niego:

1. Ustawić css nieruchomości display:none
2. Producent Właściwość Visible kontrolki asp jest tymczasowo ustawiona na true podczas wstępnego renderowania. Jest to szczegółowo opisane w wątku powiązanym powyżej z innego forum.

Należy zauważyć, że Widoczny powinien być również prawdziwy dla rodziców tej kontroli FileUpload, jak wspomniano w innym wątku SO.

Answer 2

Ten kod działa dla mnie, gdy kierujesz go zarówno do wersji środowiska .Net 4.5, jak i 4.0. Kopiuję/wklejam kod do nowej aplikacji Web Forms, aw obu przypadkach plikImport.PostedFile nie ma wartości NULL, ale zawiera Strumień obrazu, który wybrałem.

Czy występuje problem z którymkolwiek innym znacznikiem na twojej stronie? A może cykl życia Twojej strony? Czy html/javascript, który opublikowałeś na stronie kontroli użytkownika lub stronie formularza internetowego?