编辑2013-11-07:我看到很多关于这个问题的观点。如果此问题和答案对您没有帮助,请以某种方式告诉我,以便我解决。
我的 .aspx 文件中有一个FileUpload
控件。我有几个与之相关的验证器(一个CustomValidator
用于文件大小和一个RegularExpressionValidator
用于文件扩展名类型)。我想在验证器触发后onchange
向我添加一个客户端事件以触发,但是当我这样做时......FileUpload
<asp:FileUpload runat="server" ID="upl1" onchange="disableEnableUploadButton()" />
... onchange 处理程序似乎被验证器覆盖。当我将它作为属性添加到 CodeBehind 的Page_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>