我想问一下如何使用 jQuery 验证插件验证多个文件输入。
目前我有这些代码,但它不起作用:
.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);
}
});
}
最佳答案
您需要'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);
}
});
}
我认为您的代码不起作用,因为 data: new FormData(this),
中的 this
不是有效的 javascript 表单对象。
关于jQuery 验证插件 : validating multiple input files,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30095103/