jQuery验证输入文件类型
我的表单可以包含数百个<input type="file">
元素.我已经根据动态添加到页面中的顺序对它们进行了命名.
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.
例如:
<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">
在我的JQuery中,我想在可接受的MIME/文件类型上验证这些输入.像这样:
In my JQuery I want to validate these inputs on acceptable MIME/file type. Like this:
$("#formNew").validate({
rules: {
fileupload: {
required: true,
accept: "image/jpeg, image/pjpeg"
}
}
立即,我的问题是输入文件元素的name
属性是动态的.它必须是动态的,以便我的Web应用程序可以正确处理每个上载.因此,显然,在规则"部分中使用"fileupload"是行不通的.
Immediately my problem is that the name
attribute 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.
如何为所有具有"fileupload"之类名称的输入设置规则?
How do I set the rules for all inputs which have a name like "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;
});
添加一个元素,使用rules方法添加规则
One the elements are added, use the rules method to add the rules
//bug fixed thanks to @Sparky
$('input[name^="fileupload"]').each(function () {
$(this).rules('add', {
required: true,
accept: "image/jpeg, image/pjpeg"
})
})
演示:小提琴
更新
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;
});