ASP.NET中FileUpload与CustomValidator：取消选文件时验证不触发问题

为什么点击「取消」时CustomValidator不执行？ #

ASP.NET的CustomValidator客户端验证逻辑默认绑定到目标控件的change事件以及表单提交事件。而原生<input type="file">（也就是ASP.NETFileUpload控件的底层实现）仅在**用户成功选择文件（点击「打开」或双击文件）**时才会触发change事件——当用户点击「取消」关闭文件选择框时，控件的value并未发生有效变更（浏览器判定无需触发change事件），因此CustomValidator的客户端验证函数validateFile不会被调用。

实现「点击浏览后重置文本」的解决方案 #

要实现无论用户选择文件还是取消，都将上传器文本重置为「Choose a file」的需求，不能依赖CustomValidator的触发逻辑，需要直接监听FileUpload控件的点击、失去焦点事件，并结合定时器检测文件选择状态。

修改后的代码 #

JavaScript代码

// 保存点击浏览按钮前的文件数量，用于判断是否取消选择
let previousFileCount = 0;
// 获取服务器控件的客户端ID（避免NamingContainer导致ID变更）
const fileUploadId = "<%= FileUpload1.ClientID %>";
const uploaderSpanId = "<%= spUploader.ClientID %>";

const fuLoader = document.getElementById(fileUploadId);
const spnUploader = document.getElementById(uploaderSpanId);

// 点击浏览按钮时，记录当前文件数量并重置文本
fuLoader.addEventListener("click", function() {
    previousFileCount = this.files.length;
    spnUploader.textContent = "Choose a file";
});

// 成功选择文件时，更新显示文本
fuLoader.addEventListener("change", function() {
    updateUploadDisplay(this);
});

// 文件选择框关闭后（失去焦点），检测是否取消选择
fuLoader.addEventListener("focusout", function() {
    setTimeout(() => {
        // 文件数量未变化，说明用户取消了选择
        if (this.files.length === previousFileCount) {
            spnUploader.textContent = "Choose a file";
        }
    }, 100);
});

// 更新上传器显示文本的通用函数
function updateUploadDisplay(uploader) {
    if (uploader.files.length > 1) {
        spnUploader.textContent = "Multiple Files Selected";
    } else if (uploader.files.length === 1) {
        spnUploader.textContent = uploader.files[0].name;
    } else {
        spnUploader.textContent = "Choose a file";
    }
}

// 原CustomValidator验证函数，保留验证逻辑（可根据需求调整）
function validateFile(source, arguments) {
    console.log('validateFile');
    // 示例验证逻辑：至少选择一个文件
    arguments.IsValid = fuLoader.files.length > 0;
    // 同步更新显示文本
    updateUploadDisplay(fuLoader);
}

ASPX代码（无需修改，仅确保控件ID正确）

<label class="custom-file">
    <asp:FileUpload ID="FileUpload1" AllowMultiple="true" runat="server" CssClass="custom-file-input" />
    <span id="spUploader" runat="server" class="custom-file-control">Choose file...</span>
</label>   
<span class="tinytextgray">The maximum allowed file size is 5MB or smaller.</span>&nbsp;
<asp:CustomValidator ID="cvValidator" runat="server"  
    Text="Title" ToolTip="ToolTip" 
    ErrorMessage="Please select at least one file." 
    CssClass="redtext" 
    ControlToValidate="FileUpload1"  
    ClientValidationFunction = "validateFile"
    ValidationGroup="FormGroup"
    Display="Dynamic">
</asp:CustomValidator>   

代码说明 #

1. 点击事件监听：点击浏览按钮时立即重置文本，并记录当前文件数量，避免用户看到旧文件名直到对话框关闭。
2. 失去焦点+定时器：利用focusout事件结合短定时器，检测文件选择框关闭后的状态——如果文件数量未变化，说明用户取消了选择，重置文本。
3. change事件处理：用户成功选择文件时，根据文件数量更新显示文本。
4. 验证函数保留：原validateFile函数仍负责表单提交时的验证逻辑，确保验证规则正常生效。

内容的提问来源于stack exchange，提问作者johntc121