Input type=file is not passing to php page using Jquery Validation Plugin

Question

I have a html form with file upload functionality which I want to validate using jquery plugin. Now if the file is empty then it's showing an error message, but if the file is different extension then it should show the message "File type is not allowed" but it seems it's not passed to the file filecheck.php page which would validate the file type.

How can I validate this file type using this jquery plugin ? Can you help me plz ? Thanks.

Html part:

<div id="result"></div> <!--error or success message will be show here-->

<form action="editContactDetails.php" method="post" enctype="multipart/form-data" id="all_contact_details">
  <tr>
    <td></td>  
    <td align="left"><input name="file1" type="file" id="file" class="file"/></td>
    <td></td>
  </tr>
</form>

Jquery part:

$(document).ready(function() {  
    // validate signup form on keyup and submit
    $("#all_contact_details").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            //async: false,
            data: $(form).serialize(),
            beforeSend : function (){
              $('input[type=submit]').attr('disabled', false); 
            },
            success: function(response) {
            $('#result').html(response);
            //$(form).find('div').hide();
            $(form).hide();

            }            
        });
    },

        rules: {            
            file1: {
                    required: true,                    
                    remote: {
                        url: "filecheck.php",
                        type: "post"
                     }
                },

        },
        messages: {         
            file1: {
                    required: "Upload your file",                    
                    remote: "File is not allowed"
                },          
        }
    });

});

Php part (filecheck.php)

<?php
$file1 =  $_FILES['file1']['name']; 
$allowedExts = array("jpg");    
$temp = stripslashes($file1);
$temp = explode(".", $temp);
$extension = end($temp);    

if(!in_array($extension, $allowedExts))
    echo 'false';
else
    echo 'true';        
?>

While for some people it's obvious from the syntax, it's always worth mentioning which jquery validation you are using (with a link). — Debreczeni András
– Debreczeni András, Commented Jun 6, 2014 at 8:32

Debreczeni András · Accepted Answer · 2014-06-06 08:10:29Z

1

The SubmitHandler handles the actual submit when the form is valid:
http://jqueryvalidation.org/validate/#submithandler

So this won't validate the file extension itself.

You can however use the extension validator built into jqueryvalidation which will do exactly what you are trying to achive. See this link for reference and for examples:

http://jqueryvalidation.org/extension-method/

answered Jun 6, 2014 at 8:10

Debreczeni András

1,69812 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabian de Pabian · Accepted Answer · 2014-06-10 08:59:07Z

1

Before trying any harder, it is not supported by all browsers to submit a file with AJAX. You can however do a trick which is actually submitting the form to a target iframe and then using javascript to read the contents of that iframe and show/use them somehow. This way you actually submitted the form without refreshing the main window.

This article quite covers it: Ajax: a simplified version of file upload form using IFRAME

edited Jun 10, 2014 at 8:59

answered Jun 6, 2014 at 8:34

Fabian de Pabian

6194 silver badges20 bronze badges

2 Comments

MaxArt Over a year ago

It is possible to submit a file with Ajax. Every modern browser can do that.

Fabian de Pabian Over a year ago

Thanks for noticing, i changed the content

Collectives™ on Stack Overflow

Input type=file is not passing to php page using Jquery Validation Plugin

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related