Question

编辑 2013-11-07：我看到很多关于这个问题的观点。如果这个问题和答案对您没有帮助，请以某种方式告诉我，以便我能解决。

我的.aspx文件中有一个FileUpload控件。我有一些绑定它的验证器（文件大小为CustomValidator，文件扩展类型为RegularExpressionValidator。我想在验证器触发后向我的onchange添加一个客户端FileUpload事件，但是当我这样做时......

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

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

有没有一种简单的方法可以解决这个问题，希望不添加on-client-load事件来挖掘页面并修改生成的文件输入的属性？

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

编辑：这是一个有效的（据我所知）解决方案，有点修剪。解决问题的重要部分是最后四行。这不是Yuriy的确切解决方案，但他的解决方案导致了这一点。 .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

在服务器端生成它

带验证程序的FileUpload附加onchange事件

1 个答案: