Question

我有这样的文件上传：

<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。如果可能的话，我现在不知道吗？

Answer 1

我认为使用jquery可以做得更好。尝试类似：

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

Here是一个示例。你应该正确替换id。

Answer 2

您可以在onchange事件客户端添加FileUpload，然后使用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答案）。

Answer 3

您应该使用RequiredFieldValidator检查文件是否被选中，如果没有，则即使单击按钮也不要让页面回发。

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

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

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

Asp文件上传控件，如果有文件

4 个答案: