c# - 带有验证器的 FileUpload 的附加 onchange 事件

Question

编辑 2013-11-07:我看到这个问题有很多观点。如果此问题和答案对您没有帮助，请以某种方式告诉我，以便我修复它。

<小时/>

我的 .aspx 文件中有一个 FileUpload 控件。我有几个与之相关的验证器(一个用于文件大小的 CustomValidator 和一个用于文件扩展名类型的 RegularExpressionValidator )。我想向我的 FileUpload 添加一个客户端 onchange 事件，以便在验证器触发后触发，但是当我这样做时...

<asp:FileUpload runat="server" ID="upl1" onchange="disableEnableUploadButton()" />

...onchange 处理程序似乎被验证器覆盖。当我将其添加为 CodeBehind 的 Page_Load 方法中的属性时，也会发生同样的情况。

是否有一种简单的方法可以解决此问题，希望无需添加客户端加载事件来挖掘页面并修改结果文件输入的属性？

我当前的解决方案是添加另一个 CustomValidator 或修改已有的，并将我想要的代码放入其 ClientValidationFunction 脚本 block 中。但是，当用户取消文件输入的文件对话框时，这不会触发。而且确实很粗糙。

<小时/>

编辑:这是一个可行的(据我所知)解决方案，稍作修改。解决我遇到的问题的重要部分是最后四行。这不是尤里的精确解决方案，但他的解决方案导致了这一点。 .bind() 是一个古老的 jQuery 函数；我可能会使用不同的函数，例如 .on()，但我们正在运行一个旧的 jQuery 库。

 <script type="text/javascript" >
    function disableEnableUploadButton(btnID, uplID) {
        var button = document.getElementById(btnID);
        var uploader = document.getElementById(uplID);
        button.disabled = false;
        for (var i = 0; i < uploader.Validators.length; i++) {
            // Looping through each validator.
            if (uploader.Validators[i].isvalid == false) {
                // Looks like this validator isn't valid.  Better disable the upload button.
                button.disabled = true;
                break;
            }
        }
    }
    function validateFileSize(source, e) {
        var maxSize = document.getElementById('<%=hdnMaxFileSize.ClientID %>').value;
        var fileInput = document.getElementById('<%=upl1.ClientID %>');
        if (!window.FileReader || !fileInput.files || !fileInput.files[0]) {
            // No files attached.  That means no files that are too large are attached.
            e.IsValid = true;
        }
        else if (fileInput.files[0].size > maxSize) {
            // Looks like someone's trying to give us a lot of bytes.  No, thank you, Mister User.
            e.IsValid = false;
        }
    }
</script>

<asp:FileUpload runat="server" ID="upl1" />
<asp:Button ID="btnUpload" runat="server" Text="Upload file" OnClick="btnUpload_Click" CausesValidation="false" />
<asp:RegularExpressionValidator ID="valExtension" ControlToValidate="upl1" runat="server" ErrorMessage="Unallowed file type for upload" />
<asp:CustomValidator ID="valFileSize" runat="server" ControlToValidate="upl1" ClientValidationFunction="validateFileSize" ErrorMessage="File too large" OnServerValidate="valFileSize_ServerValidate" >
    <asp:HiddenField ID="hdnMaxFileSize" runat="server" />
</asp:CustomValidator>
<script type="text/javascript">
    // This is not in a function, so it fires when the markup is being processed.  That's why it appears after everything else.
    var upl = document.getElementById('<%=upl1.ClientID %>');
    $(upl).bind('change', function () { disableEnableUploadButton('<%=valExtension.ClientID %>', '<%=valFileSize.ClientID %>', '<%=btnUpload.ClientID %>'); });
</script>

Answer 1

您必须在客户端执行此操作，而不是在服务器端执行。您可以使用 $addHandler 语句将多个事件处理程序附加到元素的事件(您必须将 ScriptManager 添加到 ASPX 页面才能使其工作)。

就你的情况而言，如果你这样做

$addHandler($get("upl1"), "change", disableEnableUploadButton);

它将把这个新的处理程序链接到已经存在的任何东西上。如果您不想将此代码直接添加到客户端代码中，可以通过 ClientScript.RegisterStartupScript

在服务器端生成它