php - form include image upload - php

Question

I try to make a form to include image upload. let say I have table participant which I would like to insert to:
INSERT INTO `participant`(`Matric`, `Name`, `IC`, `Address`, `Tel`, `Phone`,
`Email`, `Phone_Ref`, `Institute`, `Course`, `Pic_Participant`, `Exp_Work`)
VALUES ([value-1],[value-2],[value-3],[value-4],[value-5],[value-6],[value-7],
[value-8],[value-9],[value-10],[value-11],[value-12])
What I want to do is to insert data and upload an image. Its attribute which is Pic_Participant.
I search about upload using ajax Ajax Image Upload and Resize with jQuery and PHP . Then I think the flow, fill the form then upload image in same page, then after upload image the data for image send to db, but the form does not submit yet. How can I get attribute from table image to add in table participant?
Please help me. I'm new about this.
EDIT
i try this code but get an error: Undefined variable
<?php
session_start();
include 'dbconnect.php';
function is_valid_type($file)
{
$valid_types = array("image/jpg", "image/jpeg", "image/bmp", "image/gif");
if (in_array($file['type'], $valid_types))
return 1;
return 0;
}
function showContents($array)
{
echo "<pre>";
print_r($array);
echo "</pre>";
}
$TARGET_PATH = "upload/";
//ERROR START HERE
$Matric = $_POST['Matric'];
$Name = $_POST['Name'];
$IC = $_POST['IC'];
$Address = $_POST['Address'];
$Tel = $_POST['Tel'];
$Phone = $_POST['Phone'];
$Email = $_POST['Email'];
$Phone_Ref = $_POST['Phone_Ref'];
$Institute = $_POST['Institute'];
$Course = $_POST['Course'];
/* $fname = $_POST['fname'];
$lname = $_POST['lname']; */
$image = $_FILES['image'];
$Exp_Work =$_POST['Exp_Work'];
//ERROR END HERE
$Matric = mysql_real_escape_string($Matric);
$Name = mysql_real_escape_string($Name);
$IC = mysql_real_escape_string($IC);
$Address = mysql_real_escape_string($Address);
$Tel = mysql_real_escape_string($Tel);
$Phone = mysql_real_escape_string($Phone);
$Email = mysql_real_escape_string($Email);
$Phone_Ref = mysql_real_escape_string($Phone_Ref);
/* $Total_sales = addslashes($_POST['Total_sales']);
$Date = addslashes($_POST['Date']); */
/* $Cer_name = mysql_real_escape_string($Cer_name); */
$Institute = mysql_real_escape_string($Institute);
$Course = mysql_real_escape_string($Course);
/* $Cat_name = addslashes($_POST['Cat_name']);
$Product_name = addslashes($_POST['Product_name']); */
/* $fname = mysql_real_escape_string($fname);
$lname = mysql_real_escape_string($lname); */
$image['name'] = mysql_real_escape_string($image['name']);
$Exp_Work = mysql_real_escape_string($Exp_Work);
$TARGET_PATH .= $image['name'];
if ( $Matric == "" ||$Name == "" ||$IC == "" ||$Address == "" ||$Tel == "" ||$Phone == "" ||$Email == "" ||$Phone_Ref == "" || $Institute == "" || $Course == ""|| $image['name'] == ""|| $Exp_Work == "" )
{
$_SESSION['error'] = "All fields are required";
echo "All fields are required";
exit;
}
if (!is_valid_type($image))
{
$_SESSION['error'] = "You must upload a jpeg, gif, or bmp";
echo"You must upload a jpeg, gif, or bmp";
exit;
}
if (file_exists($TARGET_PATH))
{
$_SESSION['error'] = "A file with that name already exists";
echo"A file with same name exists already";
exit;
}
if (move_uploaded_file($image['tmp_name'], $TARGET_PATH))
{
$sql = "insert into participant (Matric, Name, IC, Address, Tel, Phone, Email, Phone_Ref, Institute, Course, image, Exp_Work) values ('$Matric','$Name','$IC','$Address','$Tel','$Phone','$Email','$Phone_Ref','$Institute', '$Course','" . $image['name'] . "','$Exp_Work')";
$result = mysql_query($sql) or die ("Could not insert data into DB: " . mysql_error());
echo"Imgage uploaded successfully";
exit;
}
else
{
$_SESSION['error'] = "Could not upload file. Check read/write persmissions on the directory";
header("Location: fail.php");
exit;
}
?>

Answer 1

As I read your question, you want to upload the image already using the tutorial / code you found and then submit the form separately when the image already has been uploaded.
To know where you can find your image after the file upload, you have two options:
Have the image upload return the file path when the upload is complete and include that variable in your form (as a hidden input for example);
Store the image path in a session variable so that when you submit the data fields, you can access that variable to get the information of the image.
Edit: You need to check the documentation of the Form Plugin for more details, but you can return something from your upload php script. You could for example echo the file name and then you would have it available in your success function:
function afterSuccess(return_value) {
console.log(return_value); // here you have what was echoed out by php
$('#UploadForm').resetForm(); // reset form
$('#SubmitButton').removeAttr('disabled'); //enable submit button
}

Answer 2

If I got it correctly what you want is to insert image into (probably MYSQL) database.
You could achieve this by using base64_encode() of image binary data and insert resulting plaintext in database.
$image = 'path/to/image/image.png';
$imagefordbs = base64_encode($image);
/*now your image is ready to be stored in database*/
However, this method has downsides since base64_encode() takes up about 33% more then original memory, some time to process input binary, and there is dedicated datatype for this kind of requirements in mysql - BLOB.