3
我正在使用jQuery验证器插件,在验证图像期间卡住了问题,我有4个输入类型文件要上传图像(其中一个在页面上,3个在动态显示)关于一部电影,上传图像并不是必不可少的,但如果有人想要上传,那么它应该是有效的扩展手段,只有jpg.jpeg和png图像被允许..如何使用jQuery验证器插件验证多个输入类型文件
我尝试了很多方法,但没有得到成功....请告诉我,我正在做适当的方式来验证请帮助我。 这里是代码片段
<script type="text/javascript" type="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<style type="text/css">
label { width: 10em; float: left; }
p { clear: both; }
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
input [type=file] {
display:block;
width: 100%;
height: 22px;
margin: 2px 4px;
border:1px solid grey;
}
</style>
<form name="MovieForm" id="MovieForm" action="" method="POST" enctype="multipart/form-data">
<table border="0" width="100%" align="left" cellpadding="5" cellspacing="5">
<tr>
<td width="25%">Movie Name :</td>
<td width="75%" ><input type="text" name="bizName" id ="movieName" size="47" value="">
</td>
</tr>
<tr>
<td >main poster:</td>
<td ><input type="file" name="mainposter" id="mainposter" size="50" ></td>
</tr>
// These all 3 input type=file are coming dynamically through php code
<tr>
<td >Additional Poster:</td>
<td ><input type="file" name="additionalposter1" id="additionalImage1" size="50" ></td>
</tr>
<tr>
<td >Additional Poster (2):</td>
<td ><input type="file" name="additionalposter2" id="additionalImage2" size="50" ></td>
</tr>
<tr>
<td>Additional Poster (3):</td>
<td><input type="file" name="additionalposter3" id="additionalImage3" size="50" ></td>
</tr>
<tr>
<td > </td>
<td>
<input type="submit" value="Submit" name="submit" class="submit">
<input type="reset" class="formbtn" value="clear" name="clear" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#movieForm').submit(function(){
//console.log('included latest jQuery');
var validator=jQuery("#createAdForm").validate({
rules: {
movieName: {
required: true,
minlength: 2
}
},
messages: {
movieName: {
required: "Please write movie name",
minlength: "Moview name must consist of at least 2 characters"
}
},
});
jQuery("input[type=file]").bind(function(){
jQuery(this).rules("add", {
accept: "png|jpe?g",
messages: {
accept :"Only jpeg, jpg or png images"
}
});
});
//
// How to add this function in validator plugin?
// var ext = jQuery('.additionalImage').val().split('.').pop().toLowerCase();
// var allow = new Array('gif','png','jpg','jpeg');
// if(jQuery.inArray(ext, allow) == -1) {
// alert('invalid extension!');
// }
});
</script>
谢谢马克....你救了我 – JustLearn 2010-07-15 04:05:31
我很高兴帮助! – 2010-07-15 10:55:56
只是提示那些正在接受'无法调用方法'调用'未定义'错误的人:accept方法在另一个名为“additional-methods.js”的文件中。 https://github.com/jzaefferer/jquery-validation/blob/master/additional-methods.js#L597 – v42 2013-05-23 17:15:33