Asp 文件上传控制是否有文件答案

【问题标题】：Asp File upload control if has fileAsp 文件上传控制是否有文件
【发布时间】：2015-09-01 10:58:23
【问题描述】：

我有这样的文件上传：

<asp:FileUpload id="FileUploadControl" runat="server" />
    <asp:Button runat="server" id="UploadButton" class="btn btn-default disabled" text="Upload" onclick="UploadButton_Click" />
    <br /><br />
    <asp:Label runat="server" id="StatusLabel" text="Upload status: " />

以及背后的代码：

protected void UploadButton_Click(object sender, EventArgs e)
{
    if(FileUploadControl.HasFile)
    {
        try
        {
            string filename = Path.GetFileName(FileUploadControl.FileName);
            FileUploadControl.SaveAs(Server.MapPath("~/") + filename);
            StatusLabel.Text = "Upload status: File uploaded!";
        }
        catch(Exception ex)
        {
            StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
        }
    }
}

我想要检查 fileupload 是否有文件并激活我的按钮 UploadButton...确切地将 CSS 类更改为 btn btn-default active。如果可能的话，我现在不？？

【问题讨论】：

标签： jquery asp.net webforms

【解决方案1】：

我认为这应该使用 jquery 更好地完成。尝试类似：

$("#fileinput").change(function() {  
    $("#yourbutton").removeClass("disabled").addClass("active");
});

Here 是一个示例。您应该对 id 进行适当的替换。

【讨论】：

你可以这样做：$("#yourbutton").removeClass('disabled').addClass("active");

【解决方案2】：

您可以在客户端添加 FileUpload onchange 事件，然后使用 javascript 更新其类，如下所示：

<asp:FileUpload id="FileUploadControl" onchange="activateButton()" runat="server" />
<asp:Button runat="server" id="UploadButton" class="btn btn-default disabled" text="Upload" onclick="UploadButton_Click" />

在javascript中：

<script>
    function activateButton() {
        document.getElementById("<%=UploadButton.ClientID%>").className = "btn btn-default active";
    }
</script>

这是纯 javascript，如果您已经在使用 jquery，可以用它实现相同的效果（查看@avi 答案了解详情）。

【讨论】：

【解决方案3】：

你应该使用RequiredFieldValidator来检查一个文件是否被选中，如果没有，那么即使点击按钮也不要让页面回发。

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:RequiredFieldValidator ID="rfvFileupload" runat="server"
                                                ControlToValidate="FileUpload1"/>

在使用文件上传控件选择文件之前，您将无法回帖。

【讨论】：

【解决方案4】：

$(".FileUploadControl").on('change', function() {
         if (document.getElementById('<%= FileUploadControl.ClientID %>').files.length === 0) 
		{
		// File upload do not have file
	}
	else {
	   // File upload has file
	   $(".FileUploadControl").addClass("btn btn-default active");
	}
});

【讨论】：