在Javascript中创建表单并将变量传递给php，而无需刷新页面_Javascript_Php_Ajax_Forms_Xmlhttprequest

在Javascript中创建表单并将变量传递给php，而无需刷新页面

javascript php ajax forms

在Javascript中创建表单并将变量传递给php，而无需刷新页面,javascript,php,ajax,forms,xmlhttprequest,Javascript,Php,Ajax,Forms,Xmlhttprequest,这张表格我是新手。所以我现在正在一个音乐播放器网站上工作。在这种情况下，我想在服务器上上传一个文件。要做到这一点，我需要一个Javascript表单，点击按钮它将执行一个函数，打开一个XMLHttpRequest到另一个页面（upload2.php）。在该页面中，我希望“转换”表单的变量，并将它们插入MySQL数据库。所有这些都不刷新页面。我怎么做？我开始编写这段代码（upload和ajax调用函数工作正常，只想制作一个javascript表单）：主页：函数reqListener（）{

这张表格我是新手。所以我现在正在一个音乐播放器网站上工作。在这种情况下，我想在服务器上上传一个文件。要做到这一点，我需要一个Javascript表单，点击按钮它将执行一个函数，打开一个XMLHttpRequest到另一个页面（upload2.php）。在该页面中，我希望“转换”表单的变量，并将它们插入MySQL数据库。所有这些都不刷新页面。我怎么做？我开始编写这段代码（upload和ajax调用函数工作正常，只想制作一个javascript表单）：

主页：
函数reqListener（）{
document.getElementById（“content1”）.innerHTML=this.responseText；
}
函数func_upload2（）{
var xmlhttp=new XMLHttpRequest（）；
addEventListener（“加载”，reqListener）；
open（“POST”，“upload2.php”，true）；
xmlhttp.send（）；
}
上传




上传

upload2.php：
可能的重复可能的重复
MAIN PAGE:

<html>
<head>
   <script>

    function reqListener () {
        document.getElementById("content1").innerHTML = this.responseText;
    }

       function func_upload2() {
       var xmlhttp = new XMLHttpRequest();
       xmlhttp.addEventListener("load", reqListener);
       xmlhttp.open("POST", "upload2.php", true);
       xmlhttp.send();        
   }


</script>
</head>
<body>
<div id="content1">
<h1> UPLOAD </h1>

<form name="myForm"><br>
<input type=file name="pic" accept=".mp3"> <br>

<button type="button" id="upload" name="btn-upload"                                                                                                              
onclick="func_upload2()"> UPLOAD </button><br> 
</form>
</div>
</body>
</html>

upload2.php:

<html>
<head>
</head>
<body>
<?php
        $namefile=$_FILES['pic']['name'];
        $pic = rand(1000,100000) ."-".$_FILES['pic']['name'];
        $pic =$_FILES['pic']['name'];
        $pic_loc = $_FILES['pic']['tmp_name'];

        $path="Tracks/".$_SESSION['IdUser'];
        if(!is_dir($path))
           {
               Mkdir("Tracks/".$_SESSION['IdUser']."/",0777);
           }
        $folder="Tracks/".$_SESSION['IdUser']."/";
        if(move_uploaded_file($pic_loc,$folder.$pic))
        {
            $path1=$folder.$namefile;
            echo $path1;

            $insert = $connect->query("INSERT INTO Tracks (Name,   
            Path, IdUser) VALUES ('".$namefile."', '".$path1."',
            '".$_SESSION['IdUser']."');"); 
            echo "Uploaded!"; 
        }
        else
        {
           echo "Not uploaded";
        }
?>

</body>
</html>