我正在使用jQuery验证插件，并且希望在提交表单之前验证文件扩展名和文件大小。在提交表单之前验证文件扩展名和大小
"use strict";
$('#update_profile').validate({
rules: {
FirstName: {
required: true,
maxlength: 20
},
image: {
required: true,
extension: "jep | jpeg",
filesize : 50000,
}
}
});
我想要类似于上面的代码。
你需要写一个自定义的规则来验证文件的大小，也文件扩展名必须为逗号分隔字符串
$.validator.addMethod('filesize', function (value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');
jQuery(function ($) {
"use strict";
$('#update_profile').validate({
rules: {
FirstName: {
required: true,
maxlength: 20
},
image: {
required: true,
extension: "jpg,jpeg",
filesize: 5,
}
},
});
});<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form id="update_profile" method="post" action="">
<input type="file" name="image" />
<input type="submit" value="Save" />
</form>$.validator.addMethod('filesize', function (value, element, arg) {
var minsize=1000; // min 1kb
if((value>minsize)&&(value<=arg)){
return true;
}else{
return false;
}
});
$("#myform").validate({
rules: {
file_upload:{
required:true,
accept:"application/pdf,image/jpeg,image/png",
filesize: 200000 //max size 200 kb
}
},messages: {
file_upload:{
filesize:" file size must be less than 200 KB.",
accept:"Please upload .jpg or .png or .pdf file of notice.",
required:"Please upload file."
}
},
submitHandler: function(form) {
form.submit();
}
});
敏1 KB被传递到最大200 kb的文件大小，并进行测试
HTML
<div class="col-sm-9 col-lg-6 col-xs-12 col-md-9">
<div class="input-group">
<input type="text" class="form-control" name="uploadFile" readonly id="uploadFile">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="uploadFile" name="uploadFile" >
</span>
</span>
</div>
<div id="spanUploadFile">
//Message will display here
</div>
</div>
JQuery
$(document).on('change', '.btn-file :file', function() {
var input = $(this),numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
var msg = "spanUploadFile";
input.trigger('fileselect', [numFiles, label]);
genrateFileMsg(this.id, msg)
genrateSizeMsg(this.files[0], msg)
});
function genrateFileMsg(id, nId)
{
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
var fileExtensionDOB = ['pdf'];
//var fileExtensionDOB = ['pdf', 'doc', 'docx', 'txt', ];
if ($.inArray($("#" + id).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
$("#" + nId).html("Only files of type jpg, png, gif, jpeg is allowed");
return false;
}
return true
}
function genrateSizeMsg(f, nId)
{
var f = f.size;
f = f/1024;
if (f > 100)
{
$("#" + nId).html("The file you are trying to upload is too large (max 100KB)");
return false;
}
return true;
}
有一个逻辑不预定义的代码。 –
genrateFileMsg方法中定义的逻辑以及上述jquery代码中的genrateSizeMsg方法。 –
$.validator.addMethod('filesize', function (value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');
jQuery(function ($) {
"use strict";
$('#update_profile').validate({
rules: {
FirstName: {
required: true,
maxlength: 20
},
image: {
required: true,
extension: "jpg,jpeg",
filesize: 5,
}
},
});
});<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form id="update_profile" method="post" action="">
<input type="file" name="image" />
<input type="submit" value="Save" />
</form>
http://jsfiddle.net/arunpjohny/rj5a8h0q/ –
感谢阿伦......莫不精... –
@ArunPJohny，什么是 “this.optional（元素）” 的一部分吗？ – Greg