Uploading image using a popup form in php not working

Question

I have a popup form which i am submitting through AJAX and PHP. The problem is the form is submitting successfully but script is neither uploading pic nor inserting pic name to mysql.

If i don't use a popup form with the same script than it's working properly.

Any help ??

Html form:

<form action="" method="post" class="signupform">
                <label>Full Name</label>
                <input type="text" Placeholder="Name" name="name" pattern="[A-Z a-z]{3,25}" title="Name should contain 3 to 25 characters" Required="required"/>
                <br />

                <label>Email Address</label>
                <input type="email" Placeholder="Email-id" name="email" Required="required"/>
                <br />

                <label>Password</label>
                <input type="password" Placeholder="Password" name="pass" pattern="[A-Za-z0-9@]{6,15}" title="Password should be alphanumeric. Only A-Z,a-z,0-9 and @ allowed and it must be 6 to 15 digits long." Required="required"/>
                <br />

                <label>Sex</label>
                <span>Male<input type="radio" name="sex" checked="checked" value="M"/>&nbsp;&nbsp;Female<input type="radio" name="sex" value="F"/></span>
                <br />

                <label>City</label>
                <input type="text" Placeholder="City" name="city" Required="required"/>
                <br />

                <label>Profile pic</label>
                <input type="file" Placeholder="Profile pic" name="dp"/>
                <br />

                <div class="checkbox">
                    <input id="send_updates" type="checkbox" Required="required"/>
                    <label for="send_updates">I accept the <a href="termsofuse.php">terms and conditions</a></label>
                </div>

                <div class="action_btns">
                    <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                    <div class="xyx xyxy"><input type="submit" value="Register" name="submitp" class="signsub"/></div>
                </div>
</form>

Ajax:

$(document).ready(function()
{

$('.signsub').click(function()
{
    $.ajax({
            type: "POST",
            url: "ajaxsignup.php",
            data: $('.signupform').serialize(),
            cache: false,
            success: function(data) {
                if (data)
                {
                   $('.user_register').hide();
                   $(".error").html(" Thank you for joining us you are successfully logged in !!").show().delay(30000).fadeOut('slow');
                   window.location.reload().delay(30000);
                }
                else
                {

                    $(".signsub").val('Register')
                    $(".error").html("<span style='color:#cc0000'>Error:</span> Invalid username and   password. ");

                }
            }
        });


    return false;
});

});

ajaxsignup.php

<?php
session_start();

include('includes/db.php'); 

$name=$_POST['name'];

$pass=$_POST['pass'];

$email=$_POST['email'];

$sex=$_POST['sex'];

$city=$_POST['city'];

$dp=$_FILES['dp']['name'];      

include('includes/uploadfiledp.php');                    

$queryb="INSERT INTO login VALUES('','$name','$pass','$email','$sex','$city','$chckfil')";

$resultb=mysql_query($queryb);

if($resultb)

{
$_SESSION['user']=$email;

echo ok;
}

?>

uploadfiledp.php

$allowedExts = array("jpeg", "jpg");
$extension = end(explode(".", $_FILES["dp"]["name"]));
if (in_array($extension, $allowedExts))
  {
  if ($_FILES["dp"]["error"] > 0)
{
echo "Return Code: " . $_FILES["dp"]["error"] . "<br>";
}
 else
{

if (file_exists("images/" . $_FILES["dp"]["name"]))
  {
  $b=explode(".", $_FILES["dp"]["name"]);
  $first=$b[0];
  $ext=$b[1];
  $i=1;
  do
  {
  $fname1=$first;
  $fname1=$fname1.$i;
  $i++;
  $chckfil=$fname1.".".$ext;
  }
  while(file_exists("images/" . $chckfil));

  move_uploaded_file($_FILES["dp"]["tmp_name"],
  "images/" . $chckfil);

  }
else
  {
  move_uploaded_file($_FILES["dp"]["tmp_name"],
  "images/" . $_FILES["dp"]["name"]);
  $chckfil=$_FILES["dp"]["name"];
  }

}
}
else
{
echo "Invalid file";
}

Answer 1

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls. Data from file select elements is not serialized .Something like this might help u..

You can make use of Formdata() ,

    $(document).ready(function()
    {

    $("#formID").submit(function(){
    {
         var formData = new FormData($(this)[0]);

        $.ajax({
                type: "POST",
                url: "ajaxsignup.php",
                data: formData,
                contentType: false,
                processData: false,
                cache: false,
                success: function(data) {
                    if (data)
                    {
                       $('.user_register').hide();
                       $(".error").html(" Thank you for joining us you are successfully logged in !!").show().delay(30000).fadeOut('slow');
                       window.location.reload().delay(30000);
                    }
                    else
                    {

                        $(".signsub").val('Register')
                        $(".error").html("<span style='color:#cc0000'>Error:</span> Invalid username and   password. ");

                    }
                }
            });


        return false;
    });
});

FYI

FormData

ProcessData is set to false so that it prevents jQuery from automatically transforming the data into a query string