Geek Answers Handbook

JQuery validation-plugin: checking multiple input files

I would like to ask how to validate multiple input files using the jQuery validation plugin.

I currently have these codes, but it does not work:

.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!" } } });

I will also use this code to publish to new PHP for processing. But it looks like there is undefined in my uploadPhoto.php, $_FILES['files']['tmp_name'] . Can I find out how to solve this?

 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); } }); }
+5
source share
2 answers

You need 'files[]' instead of files , and if you don't add additional-methods.js , you will do it.

  $('#uploadPhotoForm').validate({ rules: { 'files[]': { required: true, extension: "png" } }, messages:{ 'files[]':{ required : "Please upload atleast 1 photo", extension:"Only png file is allowed!" } }

See jsFiddle .

About serialization. Read this how to download a file using jquery serialization

Update:

He will work

 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); } }); }

Your code is not working, I think, because this in data: new FormData(this), invalid javascript form object.

+5
source

For someone who can get to this page via google.I decided to use the following solution, since it did not work properly with several downloads in different formats.

 <input type="file" id="upload_files" name="uploaded_files[]" required="required" multiple>

I made a special verification method, since the default validator did not correctly validate several files. If I choose the 1st pdf file and another png. This example checks the pdf, doc, and docx files.

 $(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(); } }); });
+1
source

More articles:


All Articles