Send multiple file with some data via ajax to slim

1

Hey,
I’ve used own slim documentation to create an api to recieve multiple files and some other data and save the path of upload and data in my database :

$app->post('/uploadfile',function(Request $request, Response $response, array $args) {
        $decodedsenttoke = $request->getAttribute('decoded_token_data');
        $directory = $this->get('upload_directory');
        $uploadedFiles = $request->getUploadedFiles();
        $fileCount = 0;
        foreach ($uploadedFiles['multifileupload'] as $uploadedFile) {
            if ($uploadedFile->getError() === UPLOAD_ERR_OK) {
                $pathOfUploadedFiles = "http://example.com/uploads/";
                $filename = moveUploadedFile($directory, $uploadedFile);
                $pathOfUploadedFiles .= $filename;
                $input = $request->getParsedBody();
                $insertsql = "INSERT INTO
files (picturelink   ,  picturetitle ,  appointid )
 VALUES    (:picturelink  , :picturetitle , :appointid )";
                $this->db->setAttribute(PDO::MYSQL_ATTR_INIT_COMMAND, 'SET NAMES utf8');
                $sth = $this->db->prepare($insertsql);
                $sth->bindParam("picturelink", $pathOfUploadedFiles);
                $sth->bindParam("picturetitle", $input['picturetitle']);
                $sth->bindParam("appointid", $input['appointid']);
                try{
                    $sth->execute();
                    $fileCount++;
                } catch(PDOException $e){
                    echo '{"error":{"text":'.$e->getMessage().'}';
                }
            }
        }
        $insertArray = array('message'=>'inserted' , 'numberOfUploadedfiles'=>$fileCount);
        return $this->response->withJson($insertArray);
    });

When I test it with postman and form-data and upload multiple file and provide other data such as picturetitle it is working perfect.
But I want to use jquery to do this.and tried many tutorials and no result.
Can anyone help me approach this?