我想问一下如何使用jQuery validation-plugin验证多个文件输入。
目前我有这些代码但不起作用:
html的:
<form id="uploadPhotoForm" enctype="multipart/form-data" method="POST">
<table class= "uploadPhotoTable">
<tr>
<td>Photo</td>
<td>:</td>
<td><input class="field" type="file" name="files[]" id="upload_photo" align='right' multiple /></td>
</tr>
</table>
</form>
的.js:
$('#uploadPhotoForm').validate({
rules: {
files: {
required: true,
extension: "png"
}
},
messages:{
files:{
required : "Please upload atleast 1 photo",
extension:"Only png file is allowed!"
}
}
});
我还将使用此代码发布到新的PHP进行处理。但似乎在我的uploadPhoto.php中,$_FILES['files']['tmp_name']
未定义。我可以知道如何解决这个问题吗?
if ($('#uploadPhotoForm').valid()) {
$.ajax({
url: "inc/uploadPhoto.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#error1").html(data);
}
});
}
答案 0 :(得分:5)
您需要'files[]'
代替files
,如果您不添加additional-methods.js,则可以执行此操作。
$('#uploadPhotoForm').validate({
rules: {
'files[]': {
required: true,
extension: "png"
}
},
messages:{
'files[]':{
required : "Please upload atleast 1 photo",
extension:"Only png file is allowed!"
}
}
请参阅jsFiddle。
关于序列化。 请阅读此how to do file upload using jquery serialization
<强>更新强>
它会起作用
if ($('#uploadPhotoForm').valid()) {
var form = $('#uploadPhotoForm')[0]; // [0], because you need to use standart javascript object here
var formData = new FormData(form);
$.ajax({
url: "inc/uploadPhoto.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#error1").html(data);
}
});
}
我认为您的代码无效,因为this
中data: new FormData(this),
无效的javascript表单对象。
答案 1 :(得分:1)
对于可能通过google登陆此页面的人。我使用以下解决方案解决了这个问题,因为它不能正常使用不同格式的多个上传。
<input type="file" id="upload_files" name="uploaded_files[]" required="required" multiple>
我做了一个自定义验证器方法,因为默认验证器没有正确验证多个文件。如果我选择第一个文件为pdf,另一个png。此示例验证pdf,doc和docx文件。
$(function() {
$.validator.addMethod(
"validate_file_type",
function(val,elem) {
console.log(elem.id);
var files = $('#'+elem.id)[0].files;
console.log(files);
for(var i=0;i<files.length;i++){
var fname = files[i].name.toLowerCase();
var re = /(\.pdf|\.docx|\.doc)$/i;
if(!re.exec(fname))
{
console.log("File extension not supported!");
return false;
}
}
return true;
},
"Please upload pdf or doc or docx files"
);
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='formname']").validate({
// Specify validation rules
rules: {
'uploaded_files[]':{
required: true,
validate_file_type : true
}
},
// Specify validation error messages
messages: {
'uploaded_files[]':{
required : "Please upload atleast 1 document",
/*accept:"Please upload .docx or .pdf files"*/
}
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
});