jQuery验证器不能为文件输入类型工作
jQuery validator not working for file input type
我正在尝试使用jQuery验证器插件实现文件输入类型的验证。文件输入类型应该只接受.jpeg, .jpg &;.png扩展名&文件大小不应超过1MB。其他输入字段的验证工作没有任何问题。需要验证的文件输入类型。
有什么问题吗?
JavascriptjQuery.validator.addMethod('filesize', function(value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
});
$('#form').validate({
rules: {
firstname: {
minlength: 6,
required: true
},
lastname: {
minlength: 6,
required: true
},
file: {
required: true,
accept: "png|jpeg|jpg",
filesize: 1048576
}
},
messages:
{
file: "File must be JPEG or PNG, less than 1MB"
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
HTML <form id="form">
<div class="form-group">
<label class="control-label" for="firstname">First:</label>
<div class="input-group">
<input class="form-control" name="firstname" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="lastname">Last:</label>
<div class="input-group">
<input class="form-control" name="lastname" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="file">Image:</label>
<div class="input-group">
<input id="file" name="file" type="file" />
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
不给期望的结果的提琴
…应该只接受。jpeg,。jpg &. png扩展
-
accept
规则仅适用于MIME类型。extension
规则适用于文件扩展名。看起来你应该使用extension
规则而不是accept
。为了使用这些规则,您还需要包含additional-methods.js
文件。 -
为了访问文件的大小属性,您需要在
<form>
标签上设置enctype="multipart/form-data"
属性。
工作演示:http://jsfiddle.net/mv8w3m0c/1/
相关文章:
- 在<输入类型=“;文件“/>
- 如何将输入类型值或id从一个jsp传递到另一个jsp页面
- 可以't将几个数字设置为<输入类型=“;数字“>
- 在输入类型日期中设置日期
- 如何将键入的文本从一个输入类型的文本复制到另一个
- 输入类型按钮返回历史记录并返回顶部
- 从HTML表单发布blob的表单输入类型是什么
- 输入类型文件的未捕获类型错误
- 如何在jQuery Mobile中设置100%宽度的输入类型日期
- 输入类型=文件验证停止其他输入类型验证
- 如何显示在输入类型文件中选择的文件
- jQuery Modal Popup-回发后输入类型设置为null
- 在控制器中将输入类型时间更改为秒
- 更改具有相同id的输入类型的所有值
- 对于每个输入类型,使用javascript获取值
- 输入类型范围在angularjs重复内不起作用
- 我如何使HTML5<输入类型=月份>以在所有浏览器上工作
- 如何调用两个函数是一种html输入类型
- 如何使按钮作为输入类型文件
- 可以设置输入类型=文件的文本框的高度