php mysql ajax register form with image upload

Question

hello brothers i would like to ask you how can make a registration form with image upload(base64) usign php mysql ajax and this is a part of my code but it didn't work. i wish if you tell me the type of table row and give me the righ code to do this.

$("#dsubmit").click(function(){
    var formData = new FormData(this);
    demail=$("#demail").val();
    dpassword=$("#dpassword").val();
    dfirstname=$("#dfirstname").val();
    dlastname=$("#dlastname").val();
    dtel=$("#dtel").val();
    dadr=$("#dadr").val();
    dspeciality=$("#dspeciality").val();
    dcodepost=$("#dcodepost").val();

    $.ajax({
        type: "POST",
        url: "inc/regdoc.php",
        data: formData,"&demail="+demail+"&dpassword="+dpassword+"&dfirstname="+dfirstname+"&dlastname="+dlastname+"&dtel="+dtel+"&dadr="+dadr+"&dspeciality="+dspeciality+"&dcodepost="+dcodepost,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(html){
            if(html=='true') {
                $("#dmsg_box_connexion").css("color","green");
                $("#dmsg_box_connexion").html("Utilisateur Ajouté avec succés ! Redirection ...");
                window.setTimeout(function(){window.location.href = "index.php";}, 5000);
            } else { 
                $("#dmsg_box_connexion").html("S'il vous plaît remplir tous les champs");
            }
        },
        beforeSend:function() {
            if((demail == "")||(dfirstname == "")||(dlastname == "")||(dtel == "")||(dpassword == "")||(document.getElementById("dfile").value == "")||(dcodepost == "")||(dadr == "")) {
                $("#dmsg_box_connexion").css("color","red");
                $("#dmsg_box_connexion").html("Tous Les Champs Sont Obligatoires !");
                return false;
            }

            $("#dmsg_box_connexion").css("clor", "#32b1d3");
            $("#dmsg_box_connexion").html("Validation...");
        }
    });
    return false;
});

});

and this is the php file :

session_start();
$email = addslashes(htmlentities($_POST["demail"]));
$password = addslashes(htmlentities($_POST["dpassword"]));
$firstname = addslashes(htmlentities($_POST["dfirstname"]));
$lastname = addslashes(htmlentities($_POST["dlastname"]));
$codepost = addslashes(htmlentities($_POST["dcodepost"]));
$adresse = addslashes(htmlentities($_POST["dadr"]));
$tel = addslashes(htmlentities($_POST["dtel"]));
$speciality = addslashes(htmlentities($_POST["dspeciality"]));
$get_content = file_get_contents($_FILES['dfile']['tmp_name']);
$escape = mysql_real_escape_string($get_content);
$sourcePath = $_FILES['dfile']['tmp_name'];   // Storing source path of the file in a variable
$targetPath = "uploads/".$_FILES['dfile']['name'];  // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; //  Moving Uploaded file  
$pass = sha1($password);
include ('pgs/config.php');
$insert = $bdd->query("INSERT INTO tbl_docs VALUES      ('','$firstname','$lastname','$tel','$adresse','$speciality','$email','$pass','$escape','1','$codepost')");
if($insert == 1) {
    echo 'true';
} else {
    echo 'false';
}

and this is th form header:

<form id="d" method="post" action="#inc/regdoc.php" enctype="multipart/form-data">

While formatting your code I noticed your javascript is missing an else in the `beforeSend`function, and you have an }); to many.. I don't know whhich editor you use, but if you format your code properly, you would have noticed it yourself.. — Naruto, Dec 02 '14 at 08:28
You are not saving anything related to the image in database..here you can find an example and some pros and cons of different solutions: http://stackoverflow.com/questions/9722603/storing-image-in-database-directly-or-as-base64-data — Sir_Faenor, Dec 02 '14 at 08:36

CodeBreaker · Answer 1 · 2019-07-06T04:53:55.097

Check the working example i have implemented in my project how to submit a form with image and some data fields.

$(document).on('submit', '#catcategory-form', function(event) {
      event.preventDefault();
      $.ajax({
          url: "product.php",
          method: 'POST',
          data: new FormData(this),
          dataType: 'json',
          contentType: false,
          processData: false,
          success: function(infodata) {
          if(infodata=='true'){

          //do the stuff whatever you want

          }

      });
  });

The another option you can do with image upload is convert base64. What you have to do is convert you form image in base 64 and send it on onChange event to the php and upload it in a file and keep the unique name in your database

//Call this function after getting base64 by post

$imageBase64=$_POST['image_converted_base64'];//get base64 of image from client end

 $unique_name =uploadSingleImage($imageBase64);//function call

//function to upload image and get an unique name to store in db

    function uploadSingleImage($base64) {

        $uniname = uniqid() . date("Y-m-d-H-i-s") . ".jpg";
        $new_image_url = "../../image/" . $uniname;
        $base64 = 'data:image/jpeg;base64,' . $base64;
        $base64 = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64));
        file_put_contents($new_image_url, $base64);
        return $uniname;
    }

$sql = "INSERT INTO `table1`(image_name) VALUES('$unique_name')";
$conn->query($sql);

php mysql ajax register form with image upload

1 Answers1