限制上传到 jQuery 验证中的文件扩展名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20581731/
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
Restrict upload to file extensions in jQuery Validation
提问by sarath
I want to perform validation with the jQuery Validation plugin for inputtype="file". I want to restrict file formats to doc,pdf,rtf, and docx.
我想使用 jQuery 验证插件对inputtype="file". 我想将文件格式限制为doc,pdf,rtf, and docx.
Here is my code:
这是我的代码：
$("#contact-form").validate({
onfocusout: function(e) {
this.element(e);
},
rules:{
resume:{
required:true,
extension: "docx|rtf|doc|pdf"
}
},
resume:{
required:"input type is required",
extension:"select valied input file format"
}
});
回答by Sparky
You never explained the problem you're having with your code:
您从未解释过您的代码遇到的问题：
$("#contact-form").validate({
onfocusout: function(e) {
this.element(e);
},
rules:{
resume:{
required:true,
extension: "docx|rtf|doc|pdf"
}
},
resume:{
required:"input type is required",
extension:"select valied input file format"
}
});
However, you're declaring messages without using the messagesoption. This is an error that would likely break the plugin, or at the least, your custom error messages would be ignored.
但是，您是在不使用该messages选项的情况下声明消息。这是一个可能会破坏插件的错误，或者至少，您的自定义错误消息将被忽略。
Your code should look like this...
你的代码应该是这样的......
$("#contact-form").validate({
onfocusout: function(e) { // this option is not needed
this.element(e); // this is the default behavior
},
rules:{
resume:{
required:true,
extension: "docx|rtf|doc|pdf"
}
},
messages: { // <-- you must declare messages inside of "messages" option
resume:{
required:"input type is required",
extension:"select valid input file format"
}
}
});
Working DEMO: http://jsfiddle.net/ZqxR2/
工作演示：http: //jsfiddle.net/ZqxR2/
回答by Hemant Jadhav
If you don't want to create rule
如果您不想创建规则
just use accept attribute in input like below
只需在输入中使用 accept 属性，如下所示
<input type="file" accept="doc,pdf,rtf,docx"/>
<input type="file" accept="doc,pdf,rtf,docx"/>
回答by kibus90
Today I needed that script and I could not find.. I made own script (works almost for all browser, even IE). I would like notice I am beginner with jQuery, but I am trying to do something new:
今天我需要那个脚本，但我找不到……我制作了自己的脚本（几乎适用于所有浏览器，甚至 IE）。我想注意我是 jQuery 的初学者，但我正在尝试做一些新的事情：
Here example:
这里的例子：
$('#file').on('change', function() {
var numb = $(this)[0].files[0].size/1024/1024; //count file size
var resultid = $(this).val().split(".");
var gettypeup = resultid [resultid.length-1]; // take file type uploaded file
var filetype = $(this).attr('data-file_types'); // take allowed files from input
var allowedfiles = filetype.replace(/\|/g,', '); // string allowed file
var tolovercase = gettypeup.toLowerCase();
var filesize = 2; //2MB
var onlist = $(this).attr('data-file_types').indexOf(tolovercase) > -1;
var checkinputfile = $(this).attr('type');
numb = numb.toFixed(2);
if (onlist && numb <= filesize) {
$('#alert').html('The file is ready to upload').removeAttr('class').addClass('xd2'); //file OK
} else {
if(numb >= filesize && onlist){
$(this).val(''); //remove uploaded file
$('#alert').html('Added file is too big \(' + numb + ' MB\) - max file size '+ filesize +' MB').removeAttr('class').addClass('xd'); //alert that file is too big, but type file is ok
} else if(numb < filesize && !onlist) {
$(this).val(''); //remove uploaded file
$('#alert').html('An not allowed file format has been added \('+ gettypeup +') - allowed formats: ' + allowedfiles).removeAttr('class').addClass('xd'); //wrong type file
} else if(!onlist) {
$(this).val(''); //remove uploaded file
$('#alert').html('An not allowed file format has been added \('+ gettypeup +') - allowed formats: ' + allowedfiles).removeAttr('class').addClass('xd'); //wrong type file
}
}
})body{background:#fff}
#alert.xd{background:#ff9e9e; border:1px solid #ff0000;
color: #000;
padding:5px;
border-radius:10px}
#alert.xd2{background:#9effb3; border:1px solid #00de26;
color: #000;
padding:5px;
border-radius:10px}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br>
<input type="file" id="file" data-file_types="pdf|doc|docx|rtf|odt|jpg|jpeg">
<br><br>
Allowed files:<br><br>
<div id="allowed-files"></div>
<br><br>
<div id="allowed-size"></div>
<div id="alert"></div>
<script>
var title = $( "#file" ).attr( "data-file_types" ).replace(/\|/g,', ');
$( "#allowed-files" ).text( title );
</script>If there is some faults in my code, please let me know :) Thank you.
如果我的代码中有一些错误，请告诉我:) 谢谢。
Also I can answer for questions in the comments.
我也可以在评论中回答问题。
