dataForm jQuery Ajax转PHP

Question

My code does not working correctly, after 3 hours, I don't understand why it isn't working. Can anybody help me out? My goal is to sent over form fields and image to PHP with jQuery. I don't get any respond as XHR. The only thing I see is (Parameters):

-----------------------------163541139317822
Content-Disposition: form-data; name="staffnumber"

utyu
-----------------------------163541139317822
Content-Disposition: form-data; name="nameperson"

yu
-----------------------------163541139317822
Content-Disposition: form-data; name="fileupload"; filename=""
Content-Type: application/octet-stream


-----------------------------163541139317822--

Error in console: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data.

HTML

<form method="POST" id="formadduser" enctype="multipart/form-data"> 
    <div id="staffnumber" class="form-group row">
        <label for="staffnumber" class="col-sm-3 col-form-label"><strong>Personeelsnummer</strong> <img src="api/icons/info.svg"></label>
        <div class="col-sm-4">
            <input class="form-control" id="staffnumber" name="staffnumber" value="" type="text">
        </div>
    </div>
    <div id="nameperson" class="form-group row">
        <label for="nameperson" class="col-sm-3 col-form-label"><strong>Naam</strong> <img src="api/icons/info.svg"></label>
        <div class="col-sm-4">
            <input class="form-control" id="nameperson" name="nameperson" value="" type="text">
        </div>
    </div>
    <div id="rowstarttime" class="form-group row">
        <label for="starttime" class="col-sm-3 col-form-label"><strong>Afbeelding</strong></label>
        <div class="col-sm-4">
        <label class="custom-file">
            <input type="file" id="fileupload" class="custom-file-input" name="fileupload">
            <span class="custom-file-control"></span>
        </label>
        </div>
    </div>

  <div class="modal-footer">
  <button id="modaladdusersave" class="btn btn-primary mx-sm-3" type="submit">Opslaan</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Sluiten</button>
</form>

jQuery

$("#formadduser").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);
    alert(formData);
    alert('hoi');
    $.ajax({
        ajax_call: "add_user",
        url: '/api/add.php',
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            var data = $.parseJSON( data ); 
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

PHP

<?php

require_once('../database.php');

if(isset($_GET['ajax_call']) && $_GET['ajax_call'] == 'add_user') {

$staffnumber = $_GET['staffnumber']; // $_GET['staffnumber'];
$nameperson = $_GET['nameperson']; // $_GET['nameperson'];

$file = $_FILES['fileupload']['tmp_name'];  
$targetPath = "upload/".$_FILES['fileupload']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file


// Add record
// $queryNew = 'INSERT INTO Persons (id, name, image) VALUES ("'. $staffnumber .'", "'. $nameperson .'", "test")';
// mysqli_query($conn, $queryNew);

$data = array(
        'staffnumber'   => $staffnumber,
        'nameperson'    => $nameperson,
    );
echo json_encode($data);
exit;

}

?>

Answer 1

Use post method instead of get to get record in php file because you are passing data through jquery is in post method,

if(isset($_GET['ajax_call']) && $_GET['ajax_call'] == 'add_user') {
$staffnumber = $_GET['staffnumber']; // $_GET['staffnumber'];
$nameperson = $_GET['nameperson'];

instead of

if(isset($_POST['ajax_call']) && $_POST['ajax_call'] == 'add_user') {
$staffnumber = $_POST['staffnumber'];
$nameperson = $_POST['nameperson'];

And what is move_uploaded_file($sourcePath,$targetPath) source path here??, you have to pass temp file here move_uploaded_file($_FILES['fileupload']['tmp_name'],$targetPath) ;