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

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

Answer 2

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