title: Form submit to upload file and also other fields using ajax
body: <p>I have tested every question here and have also googled alot, but did not find the something that work.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="createarea"&gt;
      &lt;form id="createform" action="index/create/createcontrols.php" method="post" enctype="multipart/form-data"&gt;
        &lt;input id="title" type="text" name="title" size="30" value="Title"&gt;&lt;br&gt;&lt;br&gt;
        &lt;input id="description" type="text" name="description" size="30" value="Description"&gt;&lt;br&gt;&lt;br&gt;
        &lt;input id="keywords" type="text" name="keywords" size="30" value="Keywords"&gt;&lt;br&gt;&lt;br&gt;
        &lt;input id="link" type="text" name="link" size="30" value="Link"&gt;&lt;br&gt;&lt;br&gt;
        &lt;input id="file" type="file" name="file"&gt;&lt;br&gt;&lt;br&gt;
        &lt;input id="submit" type="button" name='submit' value="Create" onclick="myFunction()"&gt;
      &lt;/form&gt;
      &lt;div id="createformresults"&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>And here is the javascript:</p>
  
  <pre><code>function myFunction() {
    $(function () {
      $('#createform').on('submit', function (e) {
        $.ajax({
          type: 'post',
          url: 'index/create/createcontrols.php',
          data: $('#createform').serialize(),
          success: function () {
            document.getElementById('createarea').innerHTML = "SUCCESS";
          }
        });
        e.preventDefault();
      });
    });
  }
  </code></pre>
  
  <p>MY PHP CODE:</p>
  
  <pre><code> &lt;?php
  
  
  
  
  
  $db=mysql_connect('','','') or die(mysql_error());
  mysql_select_db("", $db) or die(mysql_error());
  
  
  
  
  $title = $_POST["title"];
  $description = $_POST["description"];
  $keywords = $_POST["keywords"];
  $link = $_POST["link"];
          $image=$_FILES["file"]["name"];
  
  
          $allowedExts = array("gif", "jpeg", "jpg", "png");
  $temp = explode(".", $_FILES["file"]["name"]);
  $extension = end($temp);
  if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) &amp;&amp; ($_FILES["file"]["size"] &lt; 20000) &amp;&amp; in_array($extension, $allowedExts)) {
  
      if ($_FILES["file"]["error"] &gt; 0) {
  
          echo "Return Code: " . $_FILES["file"]["error"] . "&lt;br&gt;";
  
          }
  
          else {
  
                  if (file_exists("temp/" . $_FILES["file"]["name"])) {
                  echo $_FILES["file"]["name"] . " already exists. ";
                  }
  
              else {
                  move_uploaded_file($_FILES["file"]["tmp_name"], "temp/" . $_FILES["file"]["name"]);
              }
          }
  }
  
  else { 
  
      echo "Invalid file"; 
  
               }
  
  
              $qry="insert createcontent values('null','$title','$description','$keywords','$link','$image')";
  
              $res=  mysql_query($qry) or die(mysql_error());
  
              if(mysql_affected_rows()==1) {
  
                      echo "Success"; 
  
              }  
  
  else {
  
      echo "Not Saved";                    
  
  }
  
  
  
   ?&gt; 
  </code></pre>
  
  <p>PHP code is working fine the issue is somewhere in js file.</p>