Question

使用asp:FileUpload控件进行浏览和上传工作非常正常但这是两步过程。首先，我们必须浏览然后选择文件。

我想让它一步到位所以为了使它单步执行我尝试了以下代码：

protected void Button1_Click(object sender, EventArgs e)
{
    //to launch the hidden fileupload dialog
    ClientScript.RegisterStartupScript (GetType(),
"hwa", "document.getElementById('fileupload').click();", true);

    //Getting the file name
    if (this.fileupload.HasFile)
    {
        string filename = this.fileupload.FileName;

        ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('Selected File: '" + filename + ");", true);
    }
    else 
    {
        ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('No FILE has been selected');", true);
    }

}

在此代码中，有一个fileUpload控件正在Button1_Click上调用。
理想情况下，它应该执行第一行然后应该显示文件上传控件，在选择文件或取消对话框后，流程应转到下一行。但是在完整的函数执行完成后会出现对话框。
由于此异步或非预期的执行流程if (this.fileupload.HasFile)返回false（因为尚未要求用户选择任何文件）并且我没有获得所选的文件名。

我们可以修改此代码以一步完成文件上传吗？或者，如果有任何其他方法可以做到这一点？

注意 - 我要求不要使用window forms和Threads。所以使用这两个解决方案是不可接受的。

Answer 1

您错过了Web环境中客户端/服务器端断开连接的事实。

你的行：ClientScript.RegisterStartupScript (GetType(),"hwa","document.getElementById('fileupload').click();", true);是客户端代码，在服务器端脚本被选中并且生成的HTML / javascript / CSS返回浏览器之前不会被执行，因为它是客户端javascript。您希望利用文件上传控件的onchange事件。

这个问题可以帮到你：ASP.NET FileUpload: how to automatically post back once a file is selected?

Answer 2

这不是您正在寻找的，但它可以满足您的需求。不同之处在于，您必须单击Browse按钮，而不是单击单独的按钮。当您按下Open按钮时，页面将回发。我已经使用了JQuery。这是我的代码

<强> ASPX

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="fileupload1" runat="server" />
        <asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
    </div>
    <script type="text/javascript">
        var isfirst = true;
        $(function () {

            $('#<%= fileupload1.ClientID %>').on('change', function (e) {
                console.log('change triggered');
                $('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
            });
        });

    </script>
    </form>
</body>

代码

protected void btn_Click(object sender, EventArgs e)
{
    //TODO 
}

Answer 3

对于那些迟到的人来说，

    <div>
        <asp:FileUpload ID="fu" runat="server"  CssClass="bbbb" onchange="clickSeverControl()"/>
        <asp:LinkButton Text="Upload" ID="lnkUpload" runat="server" OnClientClick="showUpload();return false;" OnClick="lnkUpload_Click"/>
    </div>

使用css隐藏文件控件

    <style>
    .hiddenStyle {
        visibility:hidden;            
    }
    </style>

在链接按钮的客户端点击事件上触发文件上传控件的单击

    function showUpload() {
        document.getElementById("fu").click();
    }

更改事件触发服务器端单击

    function clickSeverControl() {

        __doPostBack('<%= lnkUpload.ClientID %>', 'OnClick');
    }

服务器上的

单击保存上传的文件

    protected void lnkUpload_Click(object sender, EventArgs e)
    {
        fu.PostedFile.SaveAs(Server.MapPath("~/Upload") + "/" + fu.PostedFile.FileName);
    }

Answer 4

感谢另一个答案，我刚刚结合了两个例子，并在我的项目

中找到了我的问题的解决方案

<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:FileUpload ID="fileupload1" runat="server" />
    <asp:Button ID="btnUploadBulk" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
    var isfirst = true;
    $(function () {
        $('#<%= btnUploadBulk.ClientID%>').on('click', function (e) {
            showUpload();
        })
        });
    function showUpload() {
        var control = document.getElementById("<%= FileUploadControl.ClientID %>");
        control.click();
    }

</script>
</form>

背后的代码

protected void btn_Click(object sender, EventArgs e)
{
    //TODO 
}

这对我有用

ASP - 文件上传一步到位

4 个答案: