tải lên một tập tin đến máy chủ tự động bên trong một bảng cập nhật không làm việc lần đầu tiên

Question

Yêu cầu

Tôi cố gắng để tải lên một tập tin, ngay sau khi một người dùng chọn nó. Tôi phải đáp ứng các yêu cầu sau:

1. Nút này trông giống như các nút khác trong ứng dụng.
2. Tệp được tải lên ngay sau khi người dùng chọn nó.
3. Tôi cần nó nằm trong UpdatePanel vì tôi phải thực hiện các cập nhật có điều kiện cho trang. Tôi CAN thực hiện đăng lại đầy đủ đối với sự kiện được chọn (a.k.a onchange).

mã hiện

Sau đây là cách tập tin quan điểm của tôi trông:

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

liên quan 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> 

Mã đằng sau:

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

Giải thích/Dòng

1. dùng nhấp vào nút btnFileImportSkin.
2. Hàm onImport được gọi, nhấp chuột theo chương trình trên nút fileimport.
3. Người dùng chọn tệp và nhấn Mở.
4. onFileSelected được gọi.
5. onUpload được gọi thành công.
6. btnUpload_Click được gọi thành công mỗi lần.

Tuy nhiên các Vấn đề là

fileImport.PostedFile là null người sử dụng lần đầu tiên chọn một tập tin. Mọi thứ đều hoạt động tốt lần thứ hai và từ đó trở đi.

liên quan

This question liên quan chặt chẽ đến vấn đề của tôi, nhưng OP lẽ muốn một giải pháp upload Async như trong Gmail. Tôi đã cố gắng làm như sau như trong các câu trả lời cho câu hỏi này:

1. __doPostBack() trong trường hợp OnClientClick btnUpload
2. this.form.submit() onchange trường hợp kiểm soát FileUpload tôi.
3. Thiết lập thuộc tính onchange của FileUpload kiểm soát trong Page_PreRender

Ghi chú bổ sung

1. điều này đã làm việc một cách hoàn hảo khi tôi không có bản cập nhật tấm. Tôi đã làm this.form.submit() trực tiếp trong sự kiện onchange của điều khiển FileUpload.
2. khuôn khổ mục tiêu là NET 4,0

LƯU Ý: Thêm một Visible = "false" trong FileUpload kiểm soát trên. Đó là vấn đề nhưng tôi đã bỏ qua nó trong khi đặt câu hỏi.

Answer 1

Với một gợi ý từ BeeTee's answer, SO post khác và this thread on another forum, tôi phát hiện ra rằng FileUpload kiểm soát phải được nhìn thấy trong cách hiển thị trước. Đây có lẽ là đúng đối với bất cứ phụ huynh UpdatePanels kiểm soát này nằm trong Vì vậy, về cơ bản tôi đã xóa Visible=false từ định nghĩa kiểm soát của tôi dưới đây:.

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

Trong trường hợp của tôi, tôi có thể giấu nó bằng cách thiết lập css tài sảnopacity để 0. Tuy nhiên, có hai cách khác xung quanh nó:

1. Đặt css tài sản display:none
2. Make thuộc tính Hiển thị của asp control tạm thời thành true trong quá trình hiển thị trước. Đây là chi tiết trong chuỗi được liên kết ở trên từ một diễn đàn khác.

Xin lưu ý rằng Hiển thị cũng phải đúng đối với cha mẹ của kiểm soát Tải lên tệp này như đã đề cập trong chuỗi SO khác.

Answer 2

Mã này hoạt động đối với tôi, khi nhắm mục tiêu cả phiên bản khung .Net 4.5 và 4.0. Tôi sao chép/dán mã của bạn vào một ứng dụng Web Forms mới, và trong cả hai trường hợp fileImport.PostedFile không phải là null, nhưng chứa Stream của hình ảnh tôi đã chọn.

Có sự cố nào trong bất kỳ đánh dấu nào khác trên trang của bạn không? Hoặc có lẽ vòng đời trang của bạn? Html/javascript bạn đã đăng trên một điều khiển người dùng hay một trang biểu mẫu web?