Submit form with text and images using PHP and Ajax

Question

I have an HTML form with some text input and some file inputs. I am trying to upload the text and images to the database using ajax to execute it. I have tried solutions here and here btut neither works for me. Below are my codes

HTML form

<form action="genformexec.php" name="genreg" id="genreg" method="post" enctype="multipart/form-data">
      <label class="type" for="ccode">*Your confirmation code is the series of numbers sent to your mail after payment verification</label>
      <input class="half" type="text" name="ccode" id="ccode" placeholder="Confirmation Code">
      <input class="half" type="email" name="uemail" id="uemail" placeholder="Email Address">
      <input class="half" type="text" name="fname" id="fname" placeholder="First Name">
      <input class="half" type="text" name="lname" id="lname" placeholder="Last Name">
      <input class="full" type="text" name="cname" id="cname" placeholder="Company Name">
      <input class="full" type="text" name="crcnum" id="crcnum" placeholder="Company RC/BN Number">
      <input class="full" type="text" name="uaddress" id="uaddress" placeholder="Residential Address">
      <input class="full" type="text" name="caddress" id="caddress" placeholder="Company Address">
      <textarea class="full" rows="7" name="briefdes" id="briefdes" placeholder="Brief description about your company"></textarea>
      <input class="half" type="text" name="uname" id="uname" placeholder="Username">
      <input class="half" type="text" name="uphone" id="uphone" placeholder="Phone Number">
      <input class="half" type="text" name="pword" id="pword" placeholder="Password">
      <input class="half" type="text" name="cfpword" id="cfpword" placeholder="Re-Type Password">
      <div class="profImage"><img id="logo_prev" src=""></div><br>
      <label for="profimages">Upload Company Logo/Profile Picture</label><br><br>
      <input type="file" onchange="logo_prev()" name="profimages" id="profimages">
      <div class="coverimage"><img id="cover_prev"src=""></div>
      <label for="coverimage">Upload a cover image for your profile</label><br><br>
      <input type="file" onchange="cover_prev()" name="coverimage" id="coverimage">
      <input type="file" name="profimages" id="profimages">
      <label class="type">Receive request about</label>
      <div class="postLimit">
      <p class="limitType">Food Commodities</p>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Fresh Yam">Fresh Yam</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Garri">Garri</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Banana and Plantain">Banana and Plantain</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Plantain Flour">Plantain Flour</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cassava Flour">Cassava Flour</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Chilli Pepper">Chilli Pepper</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Kola Nut">Kola Nut</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Palm Oil">Palm Oil</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Smoked Fish">Smoked Fish</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Dried Vegetable">Dried Vegetable</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cray Fish">Cray Fish</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Shea Butter">Shea Butter</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cassava Chips">Cassava Chips</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Fresh Onions">Fresh Onions</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Curry Leaves">Curry Leaves</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Bitter Kola">Bitter Kola</div><br><br><br>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Bitter Kola, Fresh Yam, Garri, Banana and Plantain, Plantain Flour, Cassava Flour, Chilli Pepper, Kola Nut, Palm Oil, Smoked Fish, Dried Vegatables, Cray Fish, Shea Butter, Cassava Chips, Fresh Onions, Curry Leaves">All</div>
      </div><br><br><br><br>
      <label class="type" for="regas">You are registering as:</label>
      <input type="text" class="full readonly" readonly name="regas" id="regas" value="Exporter">
      <label class="type" for="package">Package type:</label>
      <input type="text" class="full readonly" readonly name="package" id="package" value="Bronze">
      <input type="submit" name="regSubmit" id="regSubmit" value="Submit">
  </form>

Ajax Request

$("#genreg").submit(function(e) {
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: "genformexec.php",
        type: "POST",
        data: formData,
        async: false,
        success: function (msg) {
            alert(msg)
        },
        cache: false,
        contentType: false,
        processData: false
    });
    e.preventDefault();
});

PHP Script

<?php
error_reporting(0);
session_start();
require_once ("db.php");
$db = new MyDB();

if (isset($_POST['regSubmit']))
{
  $fname = strip_tags(@$_POST['fname']);
  $lname = strip_tags(@$_POST['lname']);
  $cname = strip_tags(@$_POST['cname']);
  $crnum = strip_tags(@$_POST['crcnum']);
  $uaddress = strip_tags(@$_POST['uaddress']);
  $caddress = strip_tags(@$_POST['caddress']);
  $briefdes = strip_tags(@$_POST['briefdes']);
  $uname = strip_tags(@$_POST['uname']);
  $uphone = strip_tags(@$_POST['uphone']);
  $pword = $_POST['pword'];
  $cfpword = $_POST['cfpword'];
  $uemail = $_POST['uemail'];
  $regas = strip_tags(@$_POST['regas']);
  $package = strip_tags(@$_POST['package']);
  $imagedir = './profimages/';
  $profimages = $_FILES['profimages']['name'];
  $profimagestmpname = $_FILES['profimages']['tmp_name'];
  $profimages = $_FILES['profimages']['type'];
  $profimages = $_FILES['profimages']['size'];
  $regdate = date('d/m/Y');
  $ccode = strip_tags(@$_POST['ccode']);
  $posttype = join(", ", $_POST['postValue']);
  $status = "0";
  $verified = "0";
  $zero = "0";
  $website = strip_tags(@$_POST['website']);
  $coverimage = $_FILES['coverimage']['name'];
  $coverimagetmpname = $_FILES['coverimage']['tmp_name'];
  $coverimage = $_FILES['coverimage']['type'];
  $coverimage = $_FILES['coverimage']['size'];

  $csql = "SELECT COUNT(*) as count FROM paymentverification WHERE code = $ccode";

  $psql = $db->prepare("SELECT * FROM paymentverification WHERE code = ?");

  $psql->bindParam(1, $ccode, SQLITE3_TEXT);

  $cret = $db->querySingle($csql);
  $pret = $psql->execute();

  if ($cret == 1)
  {
    while ($prow = $pret->fetchArray(SQLITE3_ASSOC))
    {
        $cpackage = $prow['package'];

  if ($cpackage == $package)
  {

  $cql = <<<EOF
  SELECT COUNT(*) FROM users WHERE ccode = $ccode;
EOF;

$count = $db->querySingle($cql);

if ($count == 1)
{
  echo "This code as already been used";
}
else
{
    if ($pword != $cfpword)
    {
      echo 'The passwords you entered do not match. Please try again!.';
    }
    else
    {
        if (strlen($pword) <= 8)
        {
            echo 'Your password must be more than 8 characters';
        }
        else
        {


                $imagepath = $imagedir . $profimages;
                $imagepath_2 = $imagedir . $coverimage;

                $imageresult = move_uploaded_file($profimagestmpname, $imagepath);
                $imageresult_2 = move_uploaded_file($coverimagetmpname, $imagepath_2);

                if (!$imageresult && !$imageresult_2)
                {
                  echo "Error uploading Company Logo/Profile Picture";
                }
                if (!get_magic_quotes_gpc())
                {
                  $profimages = addslashes($profimages);
                  $imagepath = addslashes($imagepath);
                  $coverimage = addslashes($coverimage);
                  $imagepath_2 = addslashes($imagepath_2);
                }

                $stmt = $db->prepare('INSERT INTO users (fname, lname, cname, crcnum, caddress, uaddress, briefdes, uemail, uphone, uname, regas, pword, cfpword, profimages, package, regdate, ccode, posttype, status, verified, website, coverimage)
                VALUES (:fname, :lname, :cname, :crnum, :caddress, :uaddress, :briefdes, :uemail, :uphone, :uname, :regas, :pword, :cfpword, :profimages, :package, :regdate, :ccode, :posttype, :status, :verified, :website, :coverimage)');

                $stmt->bindValue(':fname', $fname, SQLITE3_TEXT);
                $stmt->bindValue(':lname', $lname, SQLITE3_TEXT);
                $stmt->bindValue(':cname', $cname, SQLITE3_TEXT);
                $stmt->bindValue(':crnum', $crnum, SQLITE3_TEXT);
                $stmt->bindValue(':caddress', $caddress, SQLITE3_TEXT);
                $stmt->bindValue(':uaddress', $uaddress, SQLITE3_TEXT);
                $stmt->bindValue(':briefdes', $briefdes, SQLITE3_TEXT);
                $stmt->bindValue(':uemail', $uemail, SQLITE3_TEXT);
                $stmt->bindValue(':uphone', $uphone, SQLITE3_TEXT);
                $stmt->bindValue(':regas', $regas, SQLITE3_TEXT);
                $stmt->bindValue(':regdate', $regdate, SQLITE3_TEXT);
                $stmt->bindValue(':uname', $uname, SQLITE3_TEXT);
                //Come back to password_hash password $stmt->bindValue(':pword', password_hash($pword, PASSWORD_BCRYPT));
                $stmt->bindValue(':pword', password_hash($pword, PASSWORD_BCRYPT));
                $stmt->bindValue(':cfpword', password_hash($cfpword, PASSWORD_BCRYPT));
                $stmt->bindValue(':profimages', $imagepath, SQLITE3_TEXT);
                $stmt->bindValue(':package', $package, SQLITE3_TEXT);
                $stmt->bindValue(':ccode', $ccode, SQLITE3_INTEGER);
                $stmt->bindValue(':posttype', $posttype, SQLITE3_TEXT);
                $stmt->bindValue(':status', $status, SQLITE3_INTEGER);
                $stmt->bindValue(':verified', $verified, SQLITE3_INTEGER);
                $stmt->bindValue(':website', $website, SQLITE3_TEXT);
                $stmt->bindValue(':coverimage', $imagepath_2, SQLITE3_TEXT);

                $result = $stmt->execute();

                if ($result)
                {
                    echo "Account Successfully Created";
                }
                else
                {
                    echo "Sorry!.....There was an issue creating your account. Please try again";
                }
          }
      }
    }
  }
    else
    {
        echo "You payed for the $cpackage package";
        exit();
        }
      }
  }
}
?>

So please what is the issue with any of mu codes and how do i fix and make this work. Sorry if i post unnecessary codes (I just thought they are all need for you to help me). Thanks

Answer 1

You are overwriting the file variables with different values:

$profimages = $_FILES['profimages']['name'];
$profimagestmpname = $_FILES['profimages']['tmp_name'];
$profimages = $_FILES['profimages']['type'];
$profimages = $_FILES['profimages']['size'];

Should be something like:

$profImagesName = $_FILES['profimages']['name'];
$profImagesTmpName = $_FILES['profimages']['tmp_name'];
$profImagesType = $_FILES['profimages']['type'];
$profImagesSize = $_FILES['profimages']['size'];

And then use:

$imagedir = './profimages/';
$imagepath = $imagedir . $profImagesName;
move_uploaded_file($profImagesTmpName, $imagepath);

This should be changed for all images - I don't know if it will fix the problem entirely, but it should be fixed.

Answer 2

For your reference: http://phppot.com/php/php-ajax-image-upload/

<form id="uploadForm" action="upload.php" method="post">
<input name="name" type="text" class="input" />
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />
</form>

<script type="text/javascript">
$(document).ready(function (e){
$("#uploadForm").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data:  new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#targetLayer").html(data);
},
error: function(){}             
});
}));
});
</script>