ajax php如何实现文字和文件的同时上传？

Question

新手，
我想通过ajax php实现文字和文件的同时上传。
问下该如何实现？
我尝试的方法是获取input的file然后放在data里ajax传出去但是失败了。

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部分：

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

php部分：

<?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();
?>

Answer 1

使用FormData

var formdata = new FormData();
formdata.append("name",name);
formdata.append("file" , $("#fileupload")[0].files[0]);
$.ajax({
    url: "/upload/file",
    type: 'post',
    data:formdata,
    processData : false, //不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
    contentType : false,
    success: function(ret) {
        // code
    }
})

Answer 2

$sql_insert = "insert into tabs(name,singer) values ('$name','$singer')";去掉單引號