Webcam.js upload in mysql-database problem

hello i am new here can anyone here help me it is a bit complicated. I have a working form with a webcam.js function here, so in my form there are 3 webcam.js that work but if I want to save them to the database. But there is a problem i get, to see this photo.

I have my first index.php code here. You will see a shorter version.

<?php
// include database connection file
require_once'function.php';
$insertdata=new DB_con();
if(isset($_POST['insert']))
{
// Posted Values  
$auditeurso=$_POST['Auditeur'];
$afdeling=$_POST['Afdeling'];
$zone=$_POST['Zone'];
$stand=$_POST['Stand'];
$ok=$_POST['NOKOK01'];
$results=$_POST['Results'];
$okk=$_POST['NOKOK02'];
$results2=$_POST['Results2'];
$okc=$_POST['NOKOK03'];
$results3=$_POST['Results3'];
$comment=$_POST['Bericht'];
  
//Function Calling
$sql=$insertdata->insert($auditeurso,$afdeling,$zone,$stand,$ok,$results,$okk,$results2,$okc,$results3,$comment);
if($sql)
{
// Message for successfull insertion
echo "<script>alert('Sorterende formulier is met succes ingevoegd.');</script>";
echo "<script>window.location.href='form_arrange.php'</script>"; 
}
else 
{
// Message for unsuccessfull insertion
echo "<script>alert('Er is iets fout gegaan. Probeer het opnieuw.');</script>";
echo "<script>window.location.href='form_arrange.php'</script>"; 
}
}
?>
<form id="myform" class="form-horizontal" method="post" action="">
<div class="form-group">
          <div class="col-lg-1002">
          <label class="col-lg-2 control-label">Snapshot 1</label> 
            </div>
          <div class="col-lg-1001">
          <div id="pre_take_buttons">
          <button class="btn btn-success btn-addon" type="button" onclick="configure()"><i class="fa fa-undo"></i>Camera openen</button>
          <button class="btn btn-info btn-addon" type="button" onclick="take_snapshot()"><i class="fa fa-play"></i>Neem foto</button>
          <button class="btn btn-info btn-addon" type="button" onclick="saveSnap()"><i class="fa fa-download"></i>Bewaar foto</button> 
          </div>
            </div>
          <div class="col-lg-10">        
            <div id="my_camera" class="wrapper-sm b-a m-r-xs m-b-xs bg-light"></div>
            <input type="hidden" name="Results" class="image-tag01">
            <div id="results" class="wrapper-sm b-a m-r-xs m-b-xs bg-dark">Je getrokken afbeelding verschijnt hier...</div>
          </div>
        </div>
<div class="form-group">
          <div class="col-sm-4 col-sm-offset-2">
            <button type="reset" class="btn btn-default">Annuleren</button>
            <button type="submit" name="insert" id="#myFn" class="btn btn-primary">Wijzigingen opslaan</button>
          </div>          
        </div>       
      </form>

and this here is a close up of JavaScript.

<script language="JavaScript"> 
// Configure a few settings and attach camera
  function configure(){
           Webcam.set({
           width: 320,
           height: 240,
           image_format: 'jpeg',
           jpeg_quality: 90
       });
     Webcam.attach( '#my_camera' );
   }
// A button for taking snaps

// preload shutter audio clip
     var shutter = new Audio();
     shutter.autoplay = false;
     shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

     function take_snapshot() {
// play sound effect
     shutter.play();

// take snapshot and get image data
     Webcam.snap( function(data_uri_1) {
// display results in page
     $(".image-tag01").val(data_uri_1);
    
     document.getElementById('results').innerHTML = 
       '<h3>Hier is je afbeelding:</h3>' +
       '<img id="imageprev" src="'+data_uri_1+'"/>';
       
       });

     Webcam.reset();
   }

  function saveSnap(){
// Get base64 value from <img id='imageprev'> source
     var base64image = document.getElementById("imageprev").src;
     Webcam.upload( base64image, 'saveimage.php', function(code, text) {
     console.log('Save successfully');
     alert("Eerste foto is met succes opgeslagen!");
//console.log(text);
 });

}
</script>

and this is my function.php code I would like to keep this because it works well.

<?php

define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'oopscrud02');
class DB_con
{
function __construct()
{
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
$this->dbh=$con;
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }
}
  

//Data Insertion Function
public function insert($auditeurso,$afdeling,$zone,$stand,$ok,$results,$okk,$results2,$okc,$results3,$comment)
	{
    
	$ret=mysqli_query($this->dbh,"insert into tblusers(Auditeur,Afdeling,Zone,Stand,NOKOK01,Results,NOKOK02,Results2,NOKOK03,Results3,Bericht) values('$auditeurso','$afdeling','$zone','$stand','$ok','$results','$okk','$results2','$okc','$results3','$comment')");
      
	return $ret;
	}

//Data read Function
public function fetchdata()
	{
	$result=mysqli_query($this->dbh,"select * from tblusers");
	return $result;
	}


//Data one record read Function
public function fetchonerecord($userid)
	{
	$oneresult=mysqli_query($this->dbh,"select * from tblusers where id=$userid");
	return $oneresult;
	}

//Data updation Function
public function update($auditeurso,$afdeling,$zone,$stand,$ok,$results,$okk,$results2,$okc,$results3,$comment,$userid)
	{
	$updaterecord=mysqli_query($this->dbh,"update  tblusers set Auditeur='$auditeurso',Afdeling='$afdeling',Zone='$zone',Stand='$stand',NOKOK01='$ok',Results='$results',NOKOK02='$okk',Results2='$results2',NOKOK03='$okc',Results3='$results3',Bericht='$comment' where id='$userid' ");
	return $updaterecord;
	}


//Data Deletion function Function
public function delete($rid)
	{
	$deleterecord=mysqli_query($this->dbh,"delete from tblusers where id=$rid");
	return $deleterecord;
	}
} 
?>

And i also have a saveimage.php code here i have three of them so that works too but i would like that that saveimage.php code works in the function.php code. I know it is not an easy task but I think it will work with the help of you guys

<?php
//set random name for the image, used time() for uniqueness
require_once('db.php');
$results =  time() . '.jpg';
$filepath = 'sorteren/';
if(!is_dir($filepath))
mkdir($filepath);
if(isset($_FILES['webcam'])){   
move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath.$results);
$sql="Insert into tblusers(Results) values('$results')";
$result=mysqli_query($con,$sql);
echo $filepath.$results;
}
?>

anybody here??

Can someone help me here

Sponsor our Newsletter | Privacy Policy | Terms of Service