How to add an image extension in database with jquery?

Question

I am trying to add photos to a database using jquery but the photo doesn't upload to the server, and in the database the file extension doesn't show up. When I upload without jquery there's no problem.

Every time I try with insert-photo.php the file doesn't get stored.

insert-photo.js uploads the image without any problems

html code :

<form method='post' id="myForm" action='insert-photo.php' enctype='multipart/form-data'>

Upload pic: <input type='file' name='pic'><br />
album:  <select name='subid'>

                <?php
                $lp = mysql_query("select * from gallery where subid=0") or die("error");
                while ($lpr = mysql_fetch_assoc($lp)){
                  echo "<option value='".$lpr['pid']."'>".$lpr['title']."</option>";
                }
                ?>
       </select><br>

  <br>
<button id="sub" >add</button><br><br>
<div id="live_data"></div>
</form>

<span id="result"></span>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="insert-photo.js"></script>

insert-photo.php code :

<?php
        include_once('../connect.php');
        $title= $_POST['title'];
$name = $_FILES['pic']['name'];
$size = $_FILES['pic']['size'];
                $subid= $_POST['subid'];

     $extension = pathinfo($name,PATHINFO_EXTENSION);
    $array = array('png','gif','jpeg','jpg','JPG');
       if (!in_array($extension,$array)){
            echo "<div class='faild'>".$array[0]."-".$array[1]."-".$array[2]."-".$array[3]." --> (".$name.")</div>";
       }else if ($size>100000000){
            echo "<div class='faild'>Size</div>";
       }else {
            $new_image = time().'.'.$extension;
            $file = "images/slids";
            $pic = "$file/".$new_image;
            move_uploaded_file($_FILES["pic"]["tmp_name"],"../".$pic."");
         $insert = mysql_query("INSERT INTO `gallery` (`pid`, `title`, `pic`, `subid`) VALUES (NULL, '$title', '$pic','$subid')") or die("error");
     if (isset($insert)){
         echo "Successfully Inserted";
        }else{
        echo "Insertion Failed";
        }
      }

?>

insert-photo.js code :

$("#sub").click( function() {
 $.post( $("#myForm").attr("action"),
         $("#myForm :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
clearInput();
});

$("#myForm").submit( function() {
  return false;
});
function clearInput() {
    $("#myForm :input").each( function() {
       $(this).val('');
    });


}

Answer 1

This can not be done by simply serializing the form. You could use a ready made library or try to use the FormData class for current browsers to build the data use:

var data = new FormData(jQuery('form')[0]);

Check this article, it says more then I could say: http://blog.teamtreehouse.com/uploading-files-ajax I would strongly encourage you to use an existing library.

Answer 2

Just change the following code.

Older one:

<button id="sub" >add</button

New one:

<button type="submit" id="sub" >add</button>

It will work.