自动上传文件到服务器的更新面板内不工作的第一次 [英] Uploading a file to server automatically inside an update panel does not work the first time

问题描述

要求

我想上传一个文件，只要用户选择它。我必须满足以下要求：

I am trying to upload a file, as soon as a user selects it. I have to fulfill the following requirements:

1. 按钮看起来像应用程序的其他按钮。


2. 的文件，只要用户选择其上传


3. 我需要它是一个UpdatePanel，因为我必须做出有条件的更新页面。 我CAN 做选择的文件完全回发（a.k.a 的onchange ）的事件。

1. The button looks like other buttons in the application.
2. The file is uploaded as soon as the user selects it.
3. I need it to be in an UpdatePanel as I have to make conditional updates to the page. I CAN do a full postback on the file selected (a.k.a onchange) event.

当前code

以下是我查看文件的外观：

Following is how my view file looks:

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

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

背后code：

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. 用户选择一个文件，presses打开。


4. onFileSelected 被调用。


5. onUpload 调用成功。


6. btnUpload_Click 成功每次调用。

1. User clicks on btnFileImportSkin button.
2. The function onImport is called, which programmatically clicks on the fileimport button.
3. User selects a file, and presses Open.
4. onFileSelected is called.
5. onUpload is called successfully.
6. btnUpload_Click is called successfully every time.

然而在问题是

fileImport.PostedFile是空的第一次用户选择文件。一切工作正常，第二次，并从那里。

fileImport.PostedFile is null the first time user selects a file. Everything works fine the second time and from there on.

相关

<一个href=\"http://stackoverflow.com/questions/8310832/upload-a-file-to-server-automatically-inside-a-update-panel-in-asp-net-website\">This问题密切相关，我的问题，但可能OP想要一个异步上传解决方案，在Gmail中。我已经尝试做以下作为这个问题的答案：

This question is closely related to my problem, but the OP probably wanted an Async upload solution as in Gmail. I have already tried doing the following as in the answers to this question:

1. __ doPostBack（）中的OnClientClick事件 btnUpload


2. this.form.submit（）我的文件上传控制onchange事件。


3. 设置文件上传控件的onchange属性中Page_ preRender

1. __doPostBack() in OnClientClick event of btnUpload
2. this.form.submit() onchange event of my FileUpload control.
3. Setting the onchange attribute of FileUpload control in Page_PreRender

其他注意事项

1. 这件事情非常完美的时候，我没有更新面板。 ）直接在文件上传控制onchange事件我在做this.form.submit（。


2. 目标框架是.NET 4.0

1. This thing worked perfectly when I did not have update panels. I was doing this.form.submit() directly in onchange event of FileUpload control.
2. Target framework is .NET 4.0

请注意：添加一个以上可见=在文件上传假的控制。这是问题，但我忽略了它，而问的问题。

NOTE: Added a Visible="false" in FileUpload control above. It was the problem but I had ignored it while asking question.

推荐答案

从 BeeTee的回答，另一个提示< A HREF =htt​​p://stackoverflow.com/q/11575716/365188> SO帖子和的在另一个论坛这个线程，我发现原来的文件上传的控制必须是prerendering 中可见。这可能是适用于任何家长的的UpdatePanel 的这种控制在于所以，基本上我删除可见=假从下面我的​​控制定义：

With a hint from BeeTee's answer, another SO post and this thread on another forum, I found out that the FileUpload control must be visible during prerendering. This is probably true for any parent UpdatePanels this control lies in. So, basically I removed Visible=false from my control definition below:

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

在我的情况，我可以通过设置的 CSS 的透明度属性设置为0。但是，还有它周围的其他两种方式隐藏：

In my case I could hide it by setting the css opacity property to 0. However, there are two other ways around it:

1. 将 CSS 的属性显示：无


2. 请prerendering期间临时asp的控件的Visible属性为true。这从另一个论坛上面链接线程详细说明。

请注意，可见也应在其他SO线程提到的是这个FileUpload控件的父母如此。

Please note that the Visible should also be true for parents of this FileUpload control as mentioned in the other SO thread.

这篇关于自动上传文件到服务器的更新面板内不工作的第一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！