ASP文件上传在单一步骤

本文关键字：单一步 文件 ASP | 更新日期: 2023-09-27 18:07:56

使用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。所以用这两种方法解决是不可接受的

ASP文件上传在单一步骤

你忽略了在web环境中存在客户端和服务器端断开连接的事实。

您的行:ClientScript.RegisterStartupScript (GetType(),"hwa","document.getElementById('fileupload').click();", true);是客户端代码，将不会被执行，直到服务器端脚本完成，结果HTML/javascript/CSS返回到浏览器，因为它是客户端javascript。您希望利用文件上传控件的onchange事件。

这个问题应该能帮到你:. NET FileUpload:如何自动张贴回一旦一个文件被选中?

这不是你想要的，但它确实是你想要的。不同的是，而不是点击一个单独的按钮，你必须点击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 
}

迟到的同学，

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

谢谢你的回答，我刚刚结合了两个例子，并得到了解决方案，我的问题在我的项目

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

相关文章：