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

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 Class 更改为 btn btn-default active。我现在不知道如果可能吗？？

Answer 1

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

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

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

Answer 2

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

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

Here 是样本。您应该对 id 进行适当的替换。

Answer 3

您可以添加 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 answer）。

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 文件上传控制是否有文件

Asp File upload control if has file

asp.net

jquery

webforms