JQuery 验证输入文件类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20929355/
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
JQuery Validate input file type
提问by volume one
I have a form that can have 0-hundreds of <input type="file">elements. I have named them sequentially depending on how many are dynamically added to the page.
我有一个可以包含 0 个<input type="file">元素的表单。我根据动态添加到页面的数量按顺序命名它们。
For example:
例如：
<input type="file" required="" name="fileupload1" id="fileupload1">
<input type="file" required="" name="fileupload2" id="fileupload2">
<input type="file" required="" name="fileupload3" id="fileupload3">
<input type="file" required="" name="fileupload999" id="fileupload999">
In my JQuery I want to validate these inputs on acceptable MIME/file type. Like this:
在我的 JQuery 中，我想在可接受的 MIME/文件类型上验证这些输入。像这样：
$("#formNew").validate({
rules: {
fileupload: {
required: true,
accept: "image/jpeg, image/pjpeg"
}
}
Immediately my problem is that the nameattribute of the input file elements is dynamic. It has to be dynamic so that my web application can deal with each upload correctly. So obviously using "fileupload" isn't going to work in the rules section.
我的问题是name输入文件元素的属性是动态的。它必须是动态的，以便我的 Web 应用程序可以正确处理每个上传。所以很明显，在规则部分使用“fileupload”是行不通的。
How do I set the rules for all inputs which have a name like "fileupload"?
如何为所有名称为“fileupload”的输入设置规则？
This is the code that dynamically adds the inputs:
这是动态添加输入的代码：
var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile
$('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");
filenumber++;
return false;
});
$("#FileUploader").on('click', '.RemoveFileUpload', function () { //Remove input
if (filenumber > 0) {
$(this).parent('li').remove();
filenumber--;
}
return false;
});
采纳答案by Arun P Johny
One the elements are added, use the rules method to add the rules
一、添加元素，使用rules方法添加规则
//bug fixed thanks to @Sparky
$('input[name^="fileupload"]').each(function () {
$(this).rules('add', {
required: true,
accept: "image/jpeg, image/pjpeg"
})
})
Demo: Fiddle
演示：小提琴
Update
更新
var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile
var $li = $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");
$('#FileUpload' + filenumber).rules('add', {
required: true,
accept: "image/jpeg, image/pjpeg"
})
filenumber++;
return false;
});
回答by Sparky
Simply use the .rules('add')methodimmediately after creating the element...
只需在创建元素后立即使用该.rules('add')方法...
var filenumber = 1;
$("#AddFile").click(function () { //User clicks button #AddFile
// create the new input element
$('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" /> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader");
// declare the rule on this newly created input field
$('#FileUpload' + filenumber).rules('add', {
required: true, // <- with this you would not need 'required' attribute on input
accept: "image/jpeg, image/pjpeg"
});
filenumber++; // increment counter for next time
return false;
});
You'll still need to use
.validate()to initialize the plugin within a DOM ready handler.You'll still need to declare rules for your static elements using
.validate(). Whatever input elements that are part of the form when the page loads... declare their rules within.validate().You don't need to use
.each(), when you're only targeting ONE element with the jQuery selector attached to.rules().You don't need the
requiredattribute on your input element when you're declaring therequiredrule using.validate()or.rules('add'). For whatever reason, if you still want the HTML5 attribute, at least use a proper format likerequired="required".
您仍然需要使用
.validate()来在 DOM 就绪处理程序中初始化插件。您仍然需要使用
.validate(). 页面加载时表单中的任何输入元素......在.validate().您不需要使用
.each()，当您只针对一个 jQuery 选择器附加到.rules().required当您required使用.validate()or声明规则时，您不需要输入元素上的属性.rules('add')。无论出于何种原因，如果您仍然需要 HTML5 属性，请至少使用适当的格式，例如required="required".
Working DEMO: http://jsfiddle.net/8dAU8/5/
工作演示：http: //jsfiddle.net/8dAU8/5/
回答by Dedan
So, I had the same issue and sadly just adding to the rules didn't work. I found out that accept: and extension: are not part of JQuery validate.js by default and it requires an additional-Methods.js plugin to make it work.
所以，我遇到了同样的问题，遗憾的是只是添加规则不起作用。我发现 accept: 和 extension: 默认情况下不是 JQuery validate.js 的一部分，它需要一个附加的 Methods.js 插件才能使其工作。
So for anyone else who followed this thread and it still didn't work, you can try adding additional-Methods.jsto your tag in addition to the answer above and it should work.
因此，对于关注此线程但仍然无效的任何其他人，除了上面的答案外，您还可以尝试将additional-Methods.js添加到您的标签中，它应该可以工作。
