How does ajax php upload text and files at the same time?

novice,
I want to upload text and files at the same time through ajax php.
ask how to implement it.
the method I tried was to get the file of input and put it in data and ajax sent out but failed.

html:

<form action="" method="post"
        enctype="multipart/form-data">
            <h4></h4>
            <input type="text" name="name" id="uploadname" placeholder="">
            <h4></h4>
            <input type="text" name="singer" id="uploadsinger" placeholder="">
            <h4>.gp3/.gp4/.gp5/.gpx:</h4>
            <input type="file" name="file" class="uploadbutton1" id="uploadfile">
            <input type="submit" name="submit" value="Submit" id="upload-newtab-button"/>
        </form>

js section:

$("-sharpupload-newtab-button").click(function(){
            $.ajax(  
            {  
                url:"upload.php",  
                type: "POST",  
                processData:false,  
                contentType:false,  
                data:{file:$("-sharpuploadfile").files[0],name:$("-sharpuploadname").val(),singer:$("-sharpuploadsinger").val()}
                success:function(data){                        
                    alert(data);  
                }  
            }  
            );   
        });

php section:

<?php


$upload_path = $_SERVER["DOCUMENT_ROOT"]."./uploads/";
$dest_file = $upload_path.basename($_FILES["myfile"]["name"]);

if(move_uploaded_file($_FILES["file"]["tmp_name"],$dest_file)){
    echo "upload";
}else{
    echo "".$_FILES["myfile"]["error"];
}

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "guitartabs";
$name=$_POST["name"];
$singer=$_POST["singer"];
         
// 
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die(": " . $conn->connect_error);
   } 
$sql_insert = "insert into tabs(name,singer) values ("$name","$singer")";
$res_insert = $conn->query($sql_insert);

if($res_insert) 
{ 
echo ""; 
} 
else 
{ 
echo ""; 
}          
        
$conn->close();
?>
Mar.07,2021

use FormData

var formdata = new FormData();
formdata.append("name",name);
formdata.append("file" , $("-sharpfileupload")[0].files[0]);
$.ajax({
    url: "/upload/file",
    type: 'post',
    data:formdata,
    processData : false, //dataFormdata
    contentType : false,
    success: function(ret) {
        // code
    }
})

$sql_insert = "insert into tabs (name,singer) values ('$name','$singer')"; remove single quotation marks

Menu