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>

http://stackoverflow.com/questions/543926/is-it-possible-to-use-ajax-to-do-file-upload — Uğur Gümüşhan, Jun 22 '12 at 03:54
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, Jun 22 '12 at 04:46

score 1 · Answer 1 · edited Jul 20 '12 at 17:37

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 '12 at 17:37

Brandan

14,735
3
56
71

answered Jul 20 '12 at 14:55

hemanth

21
1

its not working, could you pls give any sample program or fiddler example? – albert Jegani Jan 22 '15 at 14:56

score 0 · Answer 2 · edited May 23 '17 at 11:59

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 '17 at 11:59

Community

1
1

answered Jun 22 '12 at 03:49

jribeiro

3,387
8
43
70

So is there is a way to do this without getting rid of my Jquery Validation plugin? – KaushikTD Jun 22 '12 at 03:52
It is possible to upload files with Ajax only in HTML5 as used in [blueimp's jQuery file upload](http://blueimp.github.com/jQuery-File-Upload/), however I agree that submitting it to an `iframe` is usually an easier cross-browser way around. – Fabrício Matté Jun 22 '12 at 03:57
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! – KaushikTD Jun 28 '12 at 05:38

JQuery Validation for input type file failing on server side

2 Answers2