如何使用 jquery 验证器插件验证多个输入类型文件
我正在使用 jQuery 验证器插件,在验证图像期间遇到问题,我有 4 个输入类型文件来上传图像(其中一个在页面上,3 个动态加载)关于一部电影,上传图像不是必需的,但是,如果有人想要上传,那么它应该具有有效的扩展名意味着只允许 jpg.jpeg 和 png imaes ..
我尝试了很多方法,但没有成功....请告诉我我是否正在采取正确的方法来验证请帮助我 。 这是代码片段
<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>
I am using jQuery validator plugin, i stuck in a problem during validating images, i have 4 input type file to upload image (where one is on page and 3 are coming dynamically)regarding one movie, uploading image is not essential but, if someone wants to upload then it should be with valid extension means only jpg.jpeg and png imaes are allowed ..
i tried many way,but didn't get success....please tell me that am i doing proper way to validate please help me .
here is snippet of code
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你们非常接近。以下是与您问题中的 HTML/CSS 相匹配的正确 Javascript:
You were amazingly close. Here's the correct Javascript to match the HTML/CSS in your question: