JQuery Validation for input type file failing on server side

Question

So I'm trying out a very simple form with one field to upload an image. The input type is a file. There's a submit button also. The form has no action="" and the validation on the client side happens using the Jquery Validation plugin. Validation on the client side happens perfectly (It returns file type error), but as soon as I click upload, the upload is failing on the server side (PHP file). I don't think the file is being read on the server side since the if condition fails. My code is this:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        $("#upload").validate({
            debug: false,
            rules: {
                file: {required: true, accept: "gif|png|jpg|jpeg"}
            },
            messages: {
                file: "*Please select a file",
            },
            submitHandler: function(form) {
                // do other stuff for a valid form
                var phpurl = 'upload_file.php';
                $.post(phpurl, $("#upload").serialize(), function(data) {
                    alert(data);
                });
            }
        });
    });
</script>

The PHP Code:

<?php
if (($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    print "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    print "Upload: " . $_FILES["file"]["name"] . "<br />";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      print $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      print "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  print "Invalid file";
  }
?>

The ouput I receive as an alert - is always invalid file.

If I try the form without the Jquery validation and directly using the action="upload_file.php method, it perfectly works. What is the problem?

HTML:

<form id="upload" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

I'm sorry, that doesn't answer my question. My question is specific to the JQuery validation plugin I'm using - which offers support for input type file. I'm simply validating it using the plugin and later sending it to a PHP file for processing. — KaushikTD
– KaushikTD, Commented Jun 22, 2012 at 4:46

Brandan · Accepted Answer · 2012-07-20 17:37:31Z

1

You need to use useful jQuery validation plugin which does support the files you want to allow for upload other than other nice options.

You can use the accept property of the validation plugin to allow file types you want, here is an example:

$("#form_id").validate({
  rules: {
    field: {
      required: true,
      filesize: 1048576,
      accept: "gif|jpeg"
    }
  }
});

edited Jul 20, 2012 at 17:37

Brandan

15k3 gold badges59 silver badges71 bronze badges

answered Jul 20, 2012 at 14:55

hemanth

211 bronze badge

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

1 Comment

albert Jegani Over a year ago

its not working, could you pls give any sample program or fiddler example?

Community · Accepted Answer · 2017-05-23 11:59:23Z

0

The problem is that files can't be submitted through ajax post as PHP won't upload them to the server.

In theory you should create an iframe and make the form submit there. In practice just use this jquery plugin... http://jquery.malsup.com/form/ :) It will ease up the process

Hope it helps.

Is it possible to use Ajax to do file upload?

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jun 22, 2012 at 3:49

jribeiro

3,50110 gold badges45 silver badges70 bronze badges

3 Comments

KaushikTD Over a year ago

So is there is a way to do this without getting rid of my Jquery Validation plugin?

Fabrício Matté Over a year ago

It is possible to upload files with Ajax only in HTML5 as used in blueimp's jQuery file upload, however I agree that submitting it to an iframe is usually an easier cross-browser way around.

KaushikTD Over a year ago

So the problem was with the validation script. Files are validated but can't be passed using the $.post method if I'm not wrong. I found a workaround though. Thank you!

Collectives™ on Stack Overflow

JQuery Validation for input type file failing on server side

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related