jQuery 在提交表单之前验证文件扩展名和大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33096591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 16:56:26 来源:igfitidea点击:
Validate file extension and size before submitting form
提问by Mahesh Jagdale
I am using jQuery validate plugin, and want to validate file extension and file size before submitting a form.
我正在使用 jQuery 验证插件，并希望在提交表单之前验证文件扩展名和文件大小。
"use strict";
$('#update_profile').validate({
rules: {
FirstName: {
required: true,
maxlength: 20
},
image: {
required: true,
extension: "jep | jpeg",
filesize : 50000,
}
}
});
I want code similar to the above.
我想要类似于上面的代码。
回答by Arun P Johny
You need to write a custom rule to validate file size, also the file extensions has to be passed as a comma separated string
您需要编写自定义规则来验证文件大小，还必须将文件扩展名作为逗号分隔的字符串传递
$.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>回答by Mahesh Lad
$.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();
}
});
Min 1 kb to max 200 kb file size and it is tested
最小 1 kb 到最大 200 kb 文件大小并经过测试
回答by Alaa Moneam
$.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>回答by johannes
If you're using additional-methods.js, you can do it like this:
如果您正在使用additional-methods.js，您可以这样做：
$('#update_profile').validate({
rules: {
FirstName: {
required: true,
maxlength: 20
},
image: {
required: true,
extension: "jep | jpeg",
maxsize: 50000,
}
}
});
回答by Raj
yes its working,but in case input image field is optional,if i remove required:true this line,jquery validation not working,please help
是的，它可以工作，但如果输入图像字段是可选的，如果我删除了 required:true 这一行，jquery 验证不起作用，请帮忙
<!-- Size in kb -->
$.validator.addMethod('filesize', function (value, element,param) {
var size=element.files[0].size;
size=size/1024;
size=Math.round(size);
return this.optional(element) || 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: 1000
}
},
});
});<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>回答by Mool Singh
<!-- Size in kb -->
$.validator.addMethod('filesize', function (value, element,param) {
var size=element.files[0].size;
size=size/1024;
size=Math.round(size);
return this.optional(element) || 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: 1000
}
},
});
});<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>Max size 1000kb
最大大小 1000kb
回答by Ravindra Bohra
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;
}
